Получить все CSS-стили для элемента DOM (в стиле Firebug)

Question

Для элемента DOM, как получить все стили, указанные в CSS для определенного элемента? Это случай перебора всех имен стилей CSS?

Или есть более элегантный способ? Как Firebug это делает?

Спасибо

Answer 1

Вы сможете получить его с помощью getComputedStyle :

var css = window.getComputedStyle(element);
for (var i=0; i<css.length; i++) {
    console.log(css[i] +'='+css.getPropertyValue(""+css[i]))
}

Answer 2

Вы можете перебрать все стили CSS для такого элемента:

var myElement = document.getElementById('someId');
var myElementStyle = myElement.style;

for(var i in myElementStyle){
    // if it's not a number-index, print it out.
    if(/^[\d]+/.exec(i) == null){
        console.log("Style %s = %s", i, myElementStyle[i]);
        /*
         * Do other stuff here...
         */
    }
}

Answer 3

Для элемента DOM, как получить все стили, указанные в css для конкретного элемента?Это случай итерации по всем именам стилей CSS?

Да, это так.

Или есть более элегантный способ?

Я не знаю о более элегантном (элегантность довольно высока в субъективном масштабе), но, конечно, было бы короче и слаще, если бы вы использовали библиотеку, такую ​​как jQuery, вот решение, которое кто-то написал для ответа на другой вопрос:

Как получить список всех атрибутов CSS элементов с помощью jQuery?

Как это делает Firebug?

Iпонятия не имею.