Posted By

arantxaortega on 03/12/10

Tagged

Versions (?)

Last Edited at 03/12/10 04:36am

Statistics

Viewed 903 times

Favorited by 0 user(s)

Related snippets

Change CSS with JavaScript (HTML)

/ Published in: HTML

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<html>
<head>
<!-- Enlazamos el Framework de jQuery-->
<!-- 
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.
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"....
 -->
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="js/selectorEstilo.js"></script>
  <script type="text/javascript">
  //<![CDATA[
	$(document).ready(function(){
		$.estiloInicial('estilo1');
		$('.selector_estilo').bind('click', function() {
			$.estableceEstilo(this.getAttribute('rel'));
			return false;
		});
	});
  //]]>
  </script>
  <link rel="stylesheet" type="text/css" href="css/estilo1.css" title="estilo1" />
  <link rel="stylesheet alternate" type="text/css" href="css/estilo2.css" title="estilo2" />
  <link rel="stylesheet alternate" type="text/css" href="css/estilo3.css" title="estilo3" />
</head>
 
<body>
<noscript>
Si no tenemos javascript activado saldrÃƒÂ¡ este mensaje
</noscript>
 
<ul>
  <li><a href="#" class="selector_estilo" rel="estilo1" title="">Estilo1</a></li>
  <li><a href="#" class="selector_estilo" rel="estilo2" title="">Estilo2</a></li>
  <li><a href="#" class="selector_estilo" rel="estilo3" title="">Estilo3</a></li>
</ul>
 
</body>
</html>