Modifique la definición de regla CSS utilizando jQuery

Digamos que desea cambiar el ancho de muchos elementos para simular una tabla, por ejemplo. Me di cuenta de que podría hacer esto:Modifique la definición de regla CSS utilizando jQuery

$(".class").css('width', '421px');

Esto altera la línea style='width: 421px;'atributo para cada elemento. Ahora, lo que me gustaría hacer: es cambiar la definición misma regla CSS:

.class { 
    width: 375px; ==[change to]==> 421px; 
}

Cuando se trata de 100 si no es 1000 de anidado <ul> y <li> que necesitan ser cambiados, parece que esto sería mejor para el rendimiento que tratar de dejar que jQuery haga el trabajo a través del método .css().

he encontrado this example - esto es lo que estoy tratando de hacer:

var style = $('<style>.class { width: 421px; }</style>') 
$('html > head').append(style);

No estoy tratando de cambiar las clases ($el.removeClass().addClass()), porque no puedo tener una clase para CADA óptima ancho (379px, 387px, 402px ..).

Pude crear un elemento <style> y establecer dinámicamente el ancho, sin embargo, estoy pensando que hay una mejor manera.

método

Fuente

2012-02-09 Mike Lewis

Realmente creo que deberías escribir dos clases en tu CSS, y agregar/eliminar las apropiadas cuando sea necesario. No debe meterse con su hoja de estilo en JS, se volverá rápidamente imposible de mantener. – kapa

@kapa, esto tiene sus límites, porque todo el CSS debe definirse de antemano. Por ejemplo, no podría resaltar los elementos arbitrarios nth-child: '#root> div: nth-child ('+ Nth +') {background: red; } ' –

nativo JS: can jquery manipulate the global css definition of the document?

jQuery Plugin de Ariel Flesler: https://github.com/flesler/jquery.rule

Fuente

2012-02-09 01:24:47 Joe

' document.styleSheets [0] .addRule (". Abc", "display: none;"); 'Eso debería funcionar, ¡gracias! Tendré que verificar el plugin jQuery. ¡Espero que esta funcionalidad funcione en jQuery! –

document.styleSheets [0] .addRule obras en Chrome, 'no es una función' en FF

Fuente

2013-09-05 03:45:55 user2360953

Lo funciona para mí es incluir un bloque de estilo vacío en el encabezado:

<style id="custom-styles"></style>

Y después de manipular que con algo como esto:

$('#custom-styles').text('h1 { background: red }')

He probado esto parece funcionar en la versión actual de Chrome (bueno, cromo - 63,0) y Firefox (57.0.4).

Fuente

2018-01-19 11:20:09

Respuesta

Cuestiones relacionadas