¿Puede jQuery cambiar la definición de estilo css? (CSS no individual de cada elemento)

Question

no he visto ningún docs diciendo jQuery puede cambiar cualquier definición CSS como cambiar

td { padding: 0.2em 1.2em } 

a

td { padding: 0.32em 2em } 

pero cualquiera que tenga que cambiar todo un estilo hoja, o cambiar la clase de cada elemento, o cambiar css de cada elemento.

¿Está cambiando la definición de estilo?

Answer 1

Hay acceso DOM a hojas de estilo, pero es una de esas cosas que tendemos a evitar porque IE necesita una carga de cruxt de compatibilidad.

Una mejor manera sería típicamente para activar el cambio de forma indirecta, mediante un cambio de clase simple en un antepasado:

td { padding: 0.2em 1.2em } 
body.changed td { padding: 0.32em 2em } 

Ahora acaba de $('body').addClass('changed') y todo el td s actualización.

Si realmente tiene que FROB las hojas de estilo:

var sheet= document.styleSheets[0]; 
var rules= 'cssRules' in sheet? sheet.cssRules : sheet.rules; // IE compatibility 
rules[0].style.padding= '0.32em 2em'; 

Esto supone que la regla td en cuestión es la primera regla de la primera hoja de estilo. De lo contrario, es posible que deba buscarlo iterando las reglas buscando el texto de selección correcto. O simplemente añadir una nueva regla al final, anulando la anterior:

if ('insertRule' in sheet) 
    sheet.insertRule('td { padding: 0.32em 2em }', rules.length); 
else // IE compatibility 
    sheet.addRule('td', 'padding: 0.32em 2em', rules.length); 

jQuery en sí no le da ninguna herramienta especial para acceder a las hojas de estilo, pero es posible hay plugins que podrían.

Answer 2

No, simplemente no funciona de esta manera ... no sé de ninguna manera de explicar mejor que eso :)

jQuery fue diseñado para trabajar en los elementos ..., si está haciendo esto para prueba, Firebug de la consola de Chrome son opciones sin embargo.

Algo que podía hacer, es tener una hoja de estilo generado por el lado del servidor, por ejemplo, cómo ThemeRoller lo hace, y jQuery (o JS vainilla) añade dinámicamente que <link> en su cabecera, algo así como:

<link rel="stylesheet" href="myCSS.php?tdPad=.32|2" type="text/css" /> 

Si fue el último enlace, anularía el estilo previamente definido ... de hecho, esto es exactamente cómo funciona ThemeRoller.

Answer 3

Me encontré con un problema donde no sabía el ancho que quería una clase hasta que se cargó y lo hice.

<script> 
$(function() { 
    calcWidth = CalculateWidth(); 

    $('body').prepend('<style> .dynamicWidth { width: ' + calcWidth + 'px } </style>'); 
} 
</script> 

Nota: puede importar donde se coloca el guión (anteponer, anexa) en función de cómo desea que las reglas de 'cascada'.

Answer 4

$('head').append('<style id="customCSS">td { padding: 0.32em 2em }</style>'); 

que añade un atributo id para que pueda orientar y quitarlo cuando ya no desea que el cambio a aplicar.

$('#customCSS').remove();