Javascript/Prototype: Nhận giá trị css, không tham chiếu đến các phần tử DOM?

Question

Có thể truy xuất thuộc tính kiểu theo tên lớp (ví dụ chiều rộng của một lớp), được xác định trong tệp CSS mà không phải tìm nạp nó từ một phần tử thực trong DOM không?

Answer 1

Nó thực sự là có thể, nhưng phức tạp hơn.
Bạn có quyền truy cập vào biểu định kiểu với thuộc tính document.styleSheets.

Trong mỗi kiểu bạn cần phải truy cập vào các cssRules tài sản có chứa tất cả các quy tắc CSS trong stylesheet đó, vì vậy để có được những quy tắc đầu tiên trong stylesheet đầu tiên trong DOM bạn có thể làm

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

Để tìm một yếu tố nhất định bạn phải phân tích biểu định kiểu và đây là nơi mà nó phức tạp trong một số trường hợp, vì kiểu dáng được kế thừa vv nhưng nếu tìm kiếm một bộ chọn nhất định và một kiểu nhất định:

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

Có. Kiểm tra các tài sản document.styleSheets.

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

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