¿Es posible tener 3-4 CSS en una página, y luego en cualquier evento, por ejemplo, haga clic en, cambie el CSS para toda la página web. De esta forma podemos darle a nuestro usuario la posibilidad de cambiar el tema. Sé que podemos cambiar el CSS de un elemento por:¿Cómo cambiar el CSS de toda la página/sitio web al hacer clic?
$("#myElementID").removeClass("class1").addClass("class2");
Sí, es posible. Normalmente, lo que haría sería escribir una función de JavaScript que cambiará, agregará o eliminará una hoja de estilo del documento <head>. Para que la experiencia sea un poco mejor, normalmente almacenará las preferencias del usuario en una cookie. Hay un article on A List Apart that show how to implement this.
Y por supuesto, you can do this with jQuery ... es posible que desee verificar la fuente de jStyler.
The CSS Zen Garden (ver la quinta pregunta) terminó decidiendo que la manera más fácil era sólo para actualizar la página y establecer un nuevo servidor de CSS.
Pero lo que quiero hacer este lado @client, me refiero a usar jQuery o Javascript –
CSS se emdeded a DOM encima de la etiqueta 'enlace', para que pueda localizar este enlace y añadir/eliminar
siguiente código muestra cómo quitar y añadir uno nuevo (estoy usando MS AJAX ver método de obtener $ , pero se puede reemplazar con DOM pura u otro dialecto):
var head = document.getElementsByTagName('head')[0];
var oldLink = $get("nameOfLink", head);
if(oldLink!=null)
head.removeChild(oldLink); //remove old entry
var s = document.createElement('link');
s.id="nameOfLink";
s.type = 'text/css';
s.rel="stylesheet";
s.charset ='utf-8';
s.href = "http://your-provided-url";
head.appendChild(s);
¿eliminar y agregar 'link rel =" stylesheet "' hará esto? no estoy seguro, pero tendré que intentarlo –
@Rakesh Juyal ¿quieres decir redundancia de tipo/id/juego de caracteres? Si es así, entonces el juego de caracteres es realmente redundante, pero algunos navegadores recomiendan fuertemente el tipo (puede ser que me equivoque sobre el tipo, pero IE lo necesita). Por último, 'id' es necesaria por la lógica del script. – Dewfy
Por lo general, la mejor manera de cargar una hoja de estilo externa (se añade un enlace < >): http://snipplr.com/view/3873/failsafe-load-for-attaching-stylesheet/
pero si usted necesita para crear un grupo de estilos sobre la marcha, también puede crear y añadir un estilo < > nodo para el DOM: http://jonraasch.com/blog/javascript-style-node
esto parece prometedor :) 1 –
Ver el plguin jStyler para jQuery , la fuente es bastante corta y fácil de entender. –