Как получить полную информацию о CSS, если класс CSS указан в файлах используемых таблиц стилей - PullRequest
Новая
       18

Как получить полную информацию о CSS, если класс CSS указан в файлах используемых таблиц стилей

3 голосов
/ 27 августа 2011

Я хочу найти полную информацию о CSS прикладного класса в деталях, нажав на него. Как 

<div class="class1 class2">This is my div</div>

Предположим, я написал css в файле xyz.css 

.class1{
   background-color:#999999;
   width:auto;
   overflow:hidden;
}

.class2{
   background-color:#856241;
   width:500px;
   overflow:hidden;
}

После нажатия на div я хочу отобразить всю информацию о css, которая применяется к div. Решение jQuery будет предпочтительным.

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

Ответы [ 2 ]

4 голосов
/ 27 августа 2011

Вы можете получить текущий стиль элемента следующим образом: 

var elem = ...;
var css = document.defaultView ? document.defaultView.getComputedStyle(elem, null) : elem.currentStyle;

if ('length' in css) {
    // iterate over all property names
    for (var i = 0, l = css.length; i < l; ++i) {
        var propertyName = css[i];
        // get property value
        var value = css[propertyName];
        if (value != void 0) {
            console.log(propertyName+': '+value);
        }
    }
} else {
    // IE
    for (var propertyName in css) {
        // get property value
        var value = css[propertyName];
        if (value != void 0) {
            console.log(propertyName+': '+value);
        }
    }
}

Попробуйте это здесь: http://jsfiddle.net/P5WYC/2/

Вы также можете попробовать использовать document.styleSheets (см.1007 *http://www.quirksmode.org/dom/w3c_css.html)

0 голосов
/ 27 августа 2011

Вы можете сделать: 

<div class="class1 class2" id='myId'>This is my div</div>

elem = document.getElementById('myId');
var cssRules = (getComputedStyle || currentStyle)(elem);
var properties = {};

for (var i = 0, l = cssRules.length; i < l; ++i) {
    var propertyName = cssRules[i];

    var value = cssRules.getPropertyValue(propertyName);
    properties[propertyName] = value;
}

И свойства - это объект, который имеет все свойства CSS вашего div

...