tipos - ¿Es posible alterar una hoja de estilo CSS usando JavaScript?(NO el estilo de un objeto, sino la propia hoja de estilo)

tipos de hojas de estilo

Question

¿Es posible alterar una hoja de estilo CSS usando JavaScript?

NO estoy hablando de

document.getElementById(''id'').style._____=''.....'';

Estoy hablando de alterar:

#id {
    param: value;
}

además de hacer algo sucio (que aún no hemos probado por cierto), como crear un nuevo objeto en la cabeza, internalHTML una etiqueta de estilo allí, etc. Aunque esto, aunque funcionara, plantearía algunos problemas como el estilo el bloque ya está definido en otra parte, y no estoy seguro de cuándo / si el navegador incluso analizaría un bloque de estilo creado dinámicamente.

Answer 1

A partir de 2011

Sí, puedes, pero enfrentarás problemas de compatibilidad entre navegadores:

http://www.quirksmode.org/dom/changess.html

A partir de 2016

La compatibilidad con el navegador ha mejorado mucho (todos los navegadores son compatibles, incluido IE9 +).

• El método insertRule() permite la adición dinámica de reglas a una hoja de estilo.

• Con deleteRule() , puede eliminar las reglas existentes de una hoja de estilo.

• Se puede acceder a las reglas dentro de una hoja de estilo a través de los atributos cssRules de una hoja de estilo.

Answer 2

Cuando quiero agregar un montón de estilos a un objeto mediante programación, me resulta más fácil agregar una clase al objeto mediante programación (esta clase tiene estilos asociados a él en tu CSS). Puede controlar el orden de precedencia en su CSS para que los nuevos estilos de la nueva clase puedan anular las cosas que tenía anteriormente. En general, esto es mucho más fácil que modificar una hoja de estilo directamente y funciona perfectamente en todos los navegadores.

Answer 3

Podemos usar una combinación de insertRule() y insertRule() para poder hacer esto hasta IE9:

function changeStylesheetRule(stylesheet, selector, property, value) {
    // Make the strings lowercase
    selector = selector.toLowerCase();
    property = property.toLowerCase();
    value = value.toLowerCase();

    // Change it if it exists
    for(var i = 0; i < s.cssRules.length; i++) {
        var rule = s.cssRules[i];
        if(rule.selectorText === selector) {
            rule.style[property] = value;
            return;
        }
    }

    // Add it if it does not
    stylesheet.insertRule(selector + " { " + property + ": " + value + "; }", 0);
}

// Used like so:
changeStylesheetRule(s, "body", "color", "rebeccapurple");

Demo