Có phương pháp trình duyệt chéo nào nhận các giá trị css được sử dụng của tất cả các thuộc tính của tất cả các phần tử không?

Question

Tôi đang tìm cách nhận các giá trị css được sử dụng của tất cả các phần tử DOM trên một trang. Khi tôi nói "giá trị sử dụng" tôi đề cập đến định nghĩa theo quy định tại the W3C specification:

6.1.3 giá trị đã qua sử dụng

giá trị Tính toán được xử lý càng nhiều càng tốt mà không cần định dạng tài liệu. Tuy nhiên, một số giá trị chỉ có thể được xác định khi tài liệu được đưa ra. Ví dụ, nếu chiều rộng của một phần tử được thiết lập là một tỷ lệ phần trăm nhất định của khối chứa của nó, chiều rộng không thể được xác định cho đến khi chiều rộng của khối chứa đã được xác định. Giá trị được sử dụng là kết quả của việc tính giá trị được tính và giải quyết mọi phụ thuộc còn lại thành giá trị tuyệt đối.

Đây phải là giá trị cuối cùng được tính đối với bố cục trang thực tế. Mozilla's docs tuyên bố rằng bạn có thể sử dụng window.getComputedStyle để nhận giá trị đã sử dụng, nhưng điều này không có ý nghĩa với tôi vì giá trị được tính khác với giá trị đã sử dụng (và tôi muốn giá trị đã sử dụng). Ngay cả khi đây là những giá trị được sử dụng, tôi không chắc chắn nếu điều này chỉ hoạt động trong Firefox hay không. Có cách nào đáng tin cậy để nhận các giá trị được sử dụng trong tất cả các trình duyệt không?

Answer 1

Tôi tin rằng getComputedStylehiện trả lại giá trị "đã sử dụng" theo định nghĩa đó. Nó hoạt động trên tất cả các trình duyệt hiện đại lớn. Các phiên bản trước của IE cung cấp gần tương đương ở dạng currentStyle. Lưu ý câu cuối cùng của định nghĩa:

Các sử dụng giá trị là kết quả của việc trị giá tính toán và giải quyết bất kỳ phụ thuộc còn lại vào một giá trị tuyệt đối.

(Sự nhấn mạnh của tôi ở cuối.) Ví dụ: "giá trị được sử dụng" là giá trị thực sự được sử dụng.

Ví dụ, mã này chỉ cho tôi "500px" hoặc tương tự, không phải là "50%":

HTML:

<div id="target" style="display: inline-block; width: 50%">x</div> 

JavaScript:

(function() { 

    var target = document.getElementById("target"); 
    var style = window.getComputedStyle(target); 
    display("computed width = " + style.width); 

    function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = String(msg); 
    document.body.appendChild(p); 
    } 
})(); 

Live copy | source

Answer 2

Bạn có thể sử dụng jQuery hoặc một thư viện ưu tiên khác trong hầu hết các trường hợp. Ví dụ:

Ví dụ: tiêu đề câu hỏi của bạn có font-size:100% được áp dụng cho nó có thể được truy xuất w/firebug. Nhưng với jQuery api bạn có thể lấy giá trị sử dụng như sau:

$('#question-header .question-hyperlink').css('font-size');//run in console 
//or enter this in the url bar 
//javascript:alert($('#question-header .question-hyperlink').css('font-size')); 
//returns "23.06px" 

NB thư viện được bao gồm trên trang này, nhưng nó sẽ là khá tầm thường để tạo ra một bookmarklet bao gồm jQuery và các cuộc thăm dò các thuộc tính cần thiết.