¿Cómo puedo cambiar cssText en IE?

En el pasado, pude modificar el CSS en una página a través de una etiqueta de estilo en línea. Sé que esto suena horrible, pero es para escribir CSS personalizado mientras se trabaja en una especie de WYSIWYG (aunque no con texto).

Solía ​​hacer algo como: tag.styleSheet.cssText = myrules;

No sé cuándo exactamente, pero en algún momento IE comenzó a decir "Argumento no válido" cuando intento esto. El verdadero quid es que hacer tag.innerHTML = 'body {}' da Unable to set value of the property 'innerHTML': object is null or undefined lo que no ocurre en ningún otro navegador.

EDITAR

Para ser claros, estoy usando una etiqueta de estilo en línea. No estoy tratando de usar el atributo de estilo en línea.

<style type="text/css" id="mytag"></style>

¿Cómo puedo cambiar el interior de esa etiqueta?

EDIT 2 Por favor mira este violín:

http://jsfiddle.net/tTr5d/

Parece que mi solución de tag.styleSheet.cssText es idéntica a usar la propiedad styleSheets. Puede comentar la última definición de cssText para ver cómo funciona según lo propuesto por @Teemu. Así que ahora estoy realmente perdido por qué no funciona en mi aplicación. Si alguien tiene ideas de qué podría romper esa funcionalidad, sería genial. Mientras tanto, estaré jugando con mi aplicación.

preguntado el 11 de junio de 12 a las 19:06

@SupremeDud lo intenté styleSheet.addRule( 'body', 'background-color:#FF0000' ); en mi documento y solo devolvió un número, uno para cada regla agregada, pero no vi la actualización de CSS visualmente. De acuerdo, voy directamente a la hoja en lugar de usar styleSheets, sé que es una función allí:

@SupremeDud ve mi respuesta, que es muy diferente. -

4 Respuestas

IE está limitado a 32 hojas de estilo. Aparentemente, me gusta olvidar ese hecho, que parece incluir etiquetas de estilo en línea, además de <link>.

Cambié mi sandbox para activar la minificación para que juntara los archivos.

Entonces mi código funcionó.

Entonces, parece que cuando supera el límite e inserta a través de JS, no obtiene un error real hasta que intenta lo que hice.

Respondido el 12 de junio de 12 a las 00:06

+1 - Me alegras el día, amigo;) Gracias, pasé toda la mañana buscando una solución hasta que encontré tu respuesta. - Arkana

Sigo olvidándome de esto también, y sigo volviendo a SO para recordar que hubiera sido bueno si IE (a) no impusiera esta restricción como si fuera 1996 y (b) en realidad dio un mensaje de error que indicaba la causa del problema real en lugar de ser vago al respecto, especialmente cuando conocen la causa exacta del error. ¡Gracias de nuevo! - PeterToTheThird

Puede obtener una referencia a un styleSheet objeto sólo a través de styleSheets colección (o imports colección). Si te refieres directamente a la style elemento, solo obtendrá un elemento HTML. (Verifique las propiedades en ambos objetos dentro de un simple for..in-bucle, y ver la diferencia)

Esto funciona en todos los IE y los resultados se muestran inmediatamente:

document.styleSheets['mytag'].addRule('BODY', 'background-color:red');

Más info en MSDN: objeto de hoja de estilo

Respondido el 11 de junio de 12 a las 21:06

Hmm... Parece que mi respuesta es parcialmente incorrecta. Su código realmente funciona con hojas de estilo creadas dinámicamente, pero cuando se escriben literalmente en el head, fracasa. Por qué sucede eso, lamentablemente no sé la respuesta. - Teemu

Oh hombre, ese es un excelente punto de diferencia. Pensé que siempre se creaban dinámicamente. Ahora voy a verificar si la etiqueta se colocó en el HTML sin que otro desarrollador lo supiera (o lo olvidé porque es de hace mucho tiempo) - david stein

Me inundaron con otras tareas y finalmente tuve la oportunidad de mirar. Estas etiquetas siempre se crean dinámicamente. - david stein

Puedes usar jQuery. Si es el estilo en línea, puede usar el .attr() función.

$("#myElement").attr('style')

de lo contrario, puedes ver lo que .css() tiene que ofrecer. Puede usarlo para obtener y configurar varios estilos CSS.

Otros métodos jQuery relacionados con CSS

Respondido el 11 de junio de 12 a las 19:06

Estoy usando una etiqueta de estilo en línea como <style type="text/css">.myelements { ... }</style> Construyo una hoja de estilo que luego se guarda y se usa más tarde cuando el usuario no está editando. david stein

Nunca tuve mucha suerte con los elementos de estilo y el HTML interno de IE. Los métodos dom son más seguros, incluso si necesita ramificarse para IE;

sin jquery-

function addNewStyle(str, title){
    var el= document.createElement('style');
    if(title) el.title= title;
    if(el.styleSheet) el.styleSheet.cssText= str;
    else el.appendChild(document.createTextNode(str));
    document.getElementsByTagName('head')[0].appendChild(el);
    return el;
}

Respondido el 11 de junio de 12 a las 20:06

Sigo recibiendo el error con cssText, incluso si lo uso antes de agregar - david stein

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.