span - Cambiar dinámicamente las reglas CSS en JavaScript o jQuery.

title html

Question

Estoy buscando una manera de cambiar las reglas CSS de mi hoja de estilo importada en el documento. Así que tengo una hoja de estilo externa y algunos atributos de class y div interior. Quiero cambiar una de las reglas con JavaScript o jQuery.

Aquí hay un ejemplo :

.red{
    color:red;
}

Así que la idea es hacer algo en JavaScript y el HTML sabe que ahora el color es otro color como este:

.red{
    color:purple;
}

Pero quiero tener esta regla para cada elemento que agregue en el futuro a modo de anexo. Entonces, si agrego un span con la clase CSS .red , el texto debe ser púrpura y no rojo.

Espero haberlo dejado claro.

Answer 1

Puede inyectar declaraciones de estilo en el DOM.

$("head").append(''<style>.red { color: purple }</style>'');

Answer 2

Si desea agregar una regla, en lugar del estilo de elementos de estilos directamente, puede usar CSSStyleSheet.insertRule() . Toma dos parámetros: la regla como una cadena, y dónde insertar la regla.

Ejemplo del enlace de arriba:

// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);

En este caso, myStyle es el miembro .sheet de un elemento de style .

Por lo que puedo decir, el elemento de style debe insertarse en el documento antes de que pueda agarrar su hoja, y no puede ser una hoja externa. También puede tomar una hoja de document.styleSheets , por ejemplo

var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);

Nota: La página recomienda que considere la posibilidad de cambiar las clases de los elementos, en lugar de cambiar cómo se ven esas clases.

Answer 3

Usted jQuery método .css() para hacer eso.

$(''.red'').css(''color'', ''purple'');

Para múltiples reglas:

$(''.red'').css({
    ''color'': ''purple'',
    ''font-size'': ''20px''
});

Cuando agregue un elemento dinámico en el futuro a DOM por medio de la forma de anexar, simplemente asigne a ese elemento alguna class o id y escriba las reglas CSS como se muestra arriba después de agregarlos y se aplicarán a todos los elementos creados dinámicamente.

Muestra de trabajo

Nota

Añadir reglas dinámicas no es una buena solución desde mi punto de vista. En lugar de la puedes cargar algún archivo CSS externo.

Pero si necesitas algo como las reglas dinámicas, agrega el método:

$(''head'').append(
  $(''<style/>'', {
    id: ''mystyle'',
    html: ''.red {color: purple }''
  })
);

Y para uso futuro:

$(''#mystyle'').append('' .someother { color: green; font-size: 13px } '');

Muestra de trabajo