Lấy tất cả các kiểu css cho phần tử DOM (a la Firebug)

Question

Đối với phần tử DOM, làm cách nào để nhận tất cả các kiểu được chỉ định trong css cho một phần tử cụ thể? Nó là một trường hợp lặp lại trên tất cả các tên kiểu css?

Hoặc có cách nào thanh lịch hơn không? Firebug làm như thế nào?

Cảm ơn

Answer 1

Đối với một phần tử DOM, làm thế nào để tôi nhận được tất cả phong cách quy định tại css cho một yếu tố ? Đây có phải là trường hợp của lặp qua tất cả các tên kiểu css không?

Vâng, đúng vậy.

Hoặc có cách nào thanh lịch hơn không?

Tôi không biết thanh lịch hơn (thanh lịch là khá cao trên quy mô chủ quan), nhưng chắc chắn sẽ ngắn hơn và ngọt ngào hơn nếu bạn sử dụng thư viện như jQuery, đây là giải pháp được mã hóa trả lời một câu hỏi khác:

How Can I Get List Of All Element CSS Attributes with jQuery?

như thế nào Firebug làm điều đó?

Tôi không biết.

Answer 2

Bạn có thể lặp qua tất cả các phong cách CSS cho một yếu tố như thế này:

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

Bạn sẽ có thể để có được nó với getComputedStyle:

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