Получить доступ ко всем свойствам стиля CSS.

Question

Я хочу получить доступ ко всем свойствам CSS (не только для определенного селектора или элемента, но и всего) с помощью JavaScript.

Я хочу перебрать все свойства коллекции .style.

Как я могу это сделать?

Answer 1

вы можете использовать CSSStyleDeclaration object. Объект CSSStyleDeclaration делает атрибуты стиля CSS доступными через свойства JavaScript. Имена этих свойств JavaScript соответствуют именам атрибутов CSS.

этот объект имеет два дополнительных свойства:

cssText
Текстовое представление набора атрибутов стиля и их значений. Текст отформатирован как в таблице стилей CSS, минус селектор элементов и фигурные скобки, которые окружают атрибуты и значения.

длина
Число пар атрибут/значение, содержащихся в этом CSSStyleDeclaration. Объект CSSStyleDeclaration также представляет собой массивный объект, элементами которого являются имена объявленных атрибутов стиля CSS.

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

Answer 2

Вы можете увидеть, как получить доступ к таблицам стилей из javascript здесь: http://www.quirksmode.org/dom/changess.html.

В IE отличается от других браузеров, и это немного боль, чтобы получить все права на перекрестный браузер.

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 

Часто, вы можете просто предопределить несколько правил CSS, а затем добавить или удалить классы из различных объектов, чтобы изменить применяемые стили.

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