Change CSS with JavaScript (HTML)


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!-- Enlazamos el Framework de jQuery-->
  2. <!--
  3. En el HTML debemos indicar en el enlace class="selector_estilo" y rel="estilo1" y en el rel del a estilo 2, etc... como el nombre del title del CSS correspondiente.
  4. Y el enlace de CSS debe contener el title que sea igual que el rel del enlace y además del rel="stylesheet", debemos indicar "alternate de la siguiente forma <link rel="stylesheet alternate"....
  5. -->
  6. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  7. <script type="text/javascript" src="js/selectorEstilo.js"></script>
  8. <script type="text/javascript">
  9. //<![CDATA[
  10. $(document).ready(function(){
  11. $.estiloInicial('estilo1');
  12. $('.selector_estilo').bind('click', function() {
  13. $.estableceEstilo(this.getAttribute('rel'));
  14. return false;
  15. });
  16. });
  17. //]]>
  18. </script>
  19. <link rel="stylesheet" type="text/css" href="css/estilo1.css" title="estilo1" />
  20. <link rel="stylesheet alternate" type="text/css" href="css/estilo2.css" title="estilo2" />
  21. <link rel="stylesheet alternate" type="text/css" href="css/estilo3.css" title="estilo3" />
  22. </head>
  23.  
  24. Si no tenemos javascript activado saldrá este mensaje
  25.  
  26. <ul>
  27. <li><a href="#" class="selector_estilo" rel="estilo1" title="">Estilo1</a></li>
  28. <li><a href="#" class="selector_estilo" rel="estilo2" title="">Estilo2</a></li>
  29. <li><a href="#" class="selector_estilo" rel="estilo3" title="">Estilo3</a></li>
  30. </ul>
  31.  
  32. </body>
  33. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.