Cargar hojas de estilo dinámicamente usando MooTools 1.2 -

La tematización se ha convertido en una gran parte de la revolución Web 2.0. Afortunadamente, también se tiene más en cuenta la semántica y los estándares CSS. Si crea sus páginas utilizando un buen código XHTML, cambiar un archivo CSS puede hacer que su sitio web se vea completamente diferente. Usando un breve fragmento de MooTools, puede cargar dinámicamente hojas de estilo primarias modificadas con solo un clic.

Paso 1: el XHTML

pa href="https://soloprogramadores.top/cargar-hojas-de-estilo-dinamicamente-usando-mootools-1-2/?theme=black" rel="load-stylesheet/black.css"Cargar hoja de estilo negro/abr /br /a href="?theme=red" rel="load-stylesheet/red.css"Cargar hoja de estilo roja/abr /br /a href="?theme=blue" rel="load-stylesheet/blue.css"Cargar hoja de estilo azul /abr /br //p

Arriba hay tres enlaces a tres temas. Se agrega la clase load-css y el atributo rel contiene la ruta al archivo CSS por el bien de MooTools. Si el usuario no tiene JavaScript, agregué un atributo href para permitir que la página cambie el tema usando métodos del lado del servidor al cargar una nueva página.

Paso 2: el CSS

/* negro.css */body { fondo:#000; color:#fff; }a{ color:#ccc; }/* azul.css */body { fondo:#00f; color:#fff; }a{ color:#fff; }/* red.css */body { fondo:#f00; color:#fff; }a{ color:#fff; }

Arriba puede ver el contenido de tres archivos de hojas de estilo. Estos pueden actuar como tres temas diferentes, por así decirlo.

Paso 3: JavaScript de MooTools

window.addEvent('domready', function () {//para cada ancla con la clase "load-css"...$$('.load-css').each(function(el) {//agrega un haga clic en el evento para agregar la hoja de estiloel.addEvent('click', function() {//obtener el archivo. El archivo se basa en el atributo rel del anclavar css = new Asset.css(el.get('rel'), { }) ;});});});

El fragmento de JavaScript de MooTools es muy simple. Para cada enlace con la clase load-css, se agrega un detector de eventos de clic para cargar la hoja de estilo especificada. Una vez que se ha inyectado una hoja de estilo en la página, no se realizan más llamadas a archivos; una vez cargada, se carga.