Javascript/Prototype: получить значения css, не ссылаясь на элементы DOM?

Question

Возможно ли получить свойство стиля по имени класса (например, по ширине класса), определенному в файле CSS, без необходимости извлекать его из фактического элемента в DOM?

Answer 1

Это действительно возможно, но намного сложнее.
У вас есть доступ к таблицам стилей с изображением document.styleSheets.

В каждой таблице стилей вы должны получить доступ к cssRules собственности, которая содержит все правила CSS в этой таблице стилей, поэтому, чтобы получить первое правило в первой таблице стилей в DOM вы можете сделать

document.styleSheets[0].cssRules[0]; 

Чтобы найти определенный элемент, который вы должны проанализировать таблицу стилей, и это, где это получить сложно, в некоторых случаях, как стили наследуются и т.д., но если ищете определенный селектор и определенного стиля:

var rules = document.styleSheets[0].cssRules, 
    theRule = null; 

for (var i=0; i<rules.length; i++) { 
    if (rules[i].selectorText.toLowerCase() == '#myelement') { 
     var width = rules[i].style.width; 
     break; 
    } 
} 

Answer 2

Да. Проверьте document.styleSheets собственности.

https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets

http://www.quirksmode.org/dom/tests/stylesheets.html