Contenido

Seleccion de CSS dinamicamente

27 ene

+ 0

Hace unos días show, me enseño esta página donde dependiendo de la resolución de la ventana se veía un diseño o se veía otro. 

Buscando un poco de información sobre la manipulación de CSS dinámicamente con javascript, encontré Stlye Sheet Switcher una librería JS que se encarga de realizar de una forma limpia este tipo de efecto.

Su uso es extremadamente sencillo, con seguir unos pasos muy facil tendremos un sitio distinto a cada click.

  • Insertamo el enlace al JS

<script src=”styleswitch.js” type=”text/javascript”>

  • Definimos las hojas de estilos que vamos a usar.

<link rel=”stylesheet” type=”text/css” href=”default.css” />

<link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”blue-theme” href=”user.css” />

<link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”brown-theme” href=”user2.css” />

  •  Y montamos un pequeño formulario (puede ser cualquier cosa, ya que usa el metodo onClick.)

<form id=”switchform”>

<input type=”radio” name=”choice” value=”none” onClick=”chooseStyle(this.value, 60)”>Default style<br />

<input type=”radio” name=”choice” value=”blue-theme” onClick=”chooseStyle(this.value, 60)”>Blue Theme<br />

<input type=”radio” name=”choice” value=”brown-theme” onClick=”chooseStyle(this.value, 60)”>Brown Theme

</form>

Para usarlo en cualquier tag HTML bastaría con añadirle el metodo onClick de la siguiente forma

<p onClick=”chooseStyle(‘blue-theme’, 60)”>Cambiemos</p>

 Descargar styleswitch.js, (Guardar como…).

javascript, CSS, switcher

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.