Crear hoja de estilo dinámica en línea

¿Cuál es la mejor manera de crear etiquetas de estilo dinámico usando js y/o jQuery?Crear hoja de estilo dinámica en línea

yo probamos este:

var style= jQuery('<style>').text('.test{}');

Esto funciona en FF, pero aparece un error en IE7 "Llamada inesperada a método o acceso a la propiedad."

var style = document.createElement('style'); 
style.innerHTML='.test{}';

Da el mismo error. No importa si uso innerHTML o innerText. Lo extraño es que muestra un error antes de agregar la etiqueta de estilo.

Sospecho que cssText tiene algo que ver con eso, pero no estoy seguro de cómo.

Fuente

2010-01-11 David

Creo que los datos CSS es tratado de forma diferente a partir del texto/HTML, por lo que no se puede utilizar de forma fiable jQuery métodos de edición de texto. –

Agregar texto a una hoja de estilo que se representará correctamente necesita una sintaxis diferente en IE que otros navegadores. Es posible que pueda utilizar algunos de esto con jQuery

document.addStyle= function(str, hoo, med){ 
    var el= document.createElement('style'); 
    el.type= "text/css"; 
    el.media= med || 'screen'; 
    if(hoo) el.title= hoo; 
    if(el.styleSheet) el.styleSheet.cssText= str;//IE only 
    else el.appendChild(document.createTextNode(str)); 
    return document.getElementsByTagName('head')[0].appendChild(el); 
    }

Fuente

2010-01-11 13:30:13 kennebec

Funciona muy bien. jQuery debe abstraer esto! ¿Algún problema de rendimiento que conozcas? – David

A menudo lo uso con una cookie para persistir en la carga de las preferencias de visualización del usuario, y en ocasiones para hacer grandes cambios de estilo en una página en lugar de recorrer elementos y aplicar estilos individuales. Ha funcionado bien durante años en IE, Firefox, Opera y Safari, incluso cuando los métodos de reglas de la hoja de estilo tenían menos soporte. – kennebec

David vea mi publicación para obtener un plugin jQuery abstraído y notas sobre el uso de este método en IE. –

Me gustaría buscar en Javascript document.styleSheets, y el método addRule().

(Negación: nunca he utilizado en realidad esto mismo)

Fuente

2010-01-11 11:43:43

Este método de generación de reglas CSS dinámicamente será defectuoso, incluso si funcionaba. IE simplemente ignorará los elementos <style> después de haber insertado más de 30 (consulte http://support.microsoft.com/kb/262161).

Puede usar el complemento jquery.rule con el fin de manipular reglas css a través de javascript.

Fuente

2010-01-11 11:47:21

Crear hoja de estilo dinámica en línea

Respuesta

Cuestiones relacionadas