Uzyskaj dostęp do wszystkich właściwości stylu CSS?

Question

Chcę uzyskać dostęp do wszystkich właściwości CSS (nie tylko dla określonego selektora lub elementu, ale wszystkie) za pomocą JavaScript.

Chcę iterować przez wszystkie właściwości kolekcji .style.

Jak mogę to zrobić?

Answer 1

można użyć CSSStyleDeclaration object. Obiekt CSSStyleDeclaration udostępnia atrybuty stylu CSS za pośrednictwem właściwości JavaScript. Nazwy tych właściwości JavaScript ściśle odpowiadają nazwom atrybutów CSS.

ten obiekt ma dwa dodatkowe właściwości:

parametr CSSText
reprezentacja tekstowa z zestawu atrybutów stylu i ich wartości. Tekst jest sformatowany jak w arkuszu stylów CSS, pomijając selektor elementów i nawiasy klamrowe otaczające atrybuty i wartości.

długość
Liczba par atrybut/wartości zawartej w tym CSSStyleDeclaration. Obiekt CSSStyleDeclaration jest również obiektem tablicowym, którego elementy są nazwami zadeklarowanych atrybutów stylu CSS.

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

Answer 2

Możesz zobaczyć, jak uzyskać dostęp do arkuszy stylów z javascript tutaj: http://www.quirksmode.org/dom/changess.html.

To różni się w IE od innych przeglądarek i trochę trudu, aby uzyskać wszystkie rzeczy związane z przeglądarką.

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 

Często można tylko wstępnie zdefiniować kilka reguł CSS, a następnie dodać lub usunąć zajęcia z różnych przedmiotów w celu zmiany stosowanych stylów.

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); 
    }); 
});