¿Tiene acceso a todas las propiedades de estilo css?

Question

Deseo obtener acceso a todas las propiedades CSS (no solo para un selector o elemento específico, sino todo) a través de JavaScript.

Quiero iterar a través de todas las propiedades de la colección .style.

¿Cómo puedo hacer esto?

Answer 1

puede usar CSSStyleDeclaration object. Un objeto CSSStyleDeclaration hace que los atributos de estilo CSS estén disponibles a través de las propiedades de JavaScript. Los nombres de estas propiedades de JavaScript se corresponden estrechamente con los nombres de atributos CSS.

Este objeto tiene dos propiedades adicionales:

CSSText
La representación textual de un conjunto de atributos de estilo y sus valores. El texto está formateado como en una hoja de estilo CSS, menos el selector de elementos y las llaves que rodean los atributos y valores.

longitud
El número de pares atributo/valor contenidas en este CSSStyleDeclaration. Un objeto CSSStyleDeclaration también es un objeto similar a una matriz cuyos elementos son los nombres de los atributos de estilo CSS que se declaran.

https://developer.mozilla.org/en/DOM/CSSStyleDeclaration
https://developer.mozilla.org/en/DOM/CSS

Answer 2

Puede ver cómo acceder a las hojas de estilo desde javascript aquí: http://www.quirksmode.org/dom/changess.html.

Es diferente en IE con respecto a otros navegadores y es un poco doloroso hacer todo lo que se puede hacer con el navegador cruzado.

var theRules = new Array(); 
if (document.styleSheets[1].cssRules) 
    theRules = document.styleSheets[1].cssRules 
else if (document.styleSheets[1].rules) 
    theRules = document.styleSheets[1].rules 

A menudo, sólo puede predefinir varias reglas CSS y luego agregar o quitar clases de diversos objetos con el fin de cambiar los estilos aplicados.

Answer 3

//to loop through the available css properties using jQuery 
$(document).ready(function() { 
    availableProps = getComputedStyle(document.body); 
    $.each(availableProps, function(propCount, cssProp) { 
     console.log('CSS Property : ' + cssProp); 
    }); 
});