Nhận giá trị css không có phần tử DOM

Question

Tôi tự hỏi liệu có cách nào để lấy giá trị css từ tệp định kiểu khi không có phần tử nào trong DOM bằng cách sử dụng nó không? Tôi đang sử dụng jQuery và tôi sử dụng selector $ (". Classname"). Css() để có được các giá trị. Nhưng với trường hợp "classname" không có trong bất kỳ yếu tố, phải làm gì để có được giá trị" Cảm ơn

Answer 1

Chỉ cần tạo một phần tử với tên lớp đó và kiểm tra nó. Bạn thậm chí không cần phải đính kèm nó vào DOM:

var $el = $('<div class="classname"></div>'); 
var opacity = $el.css('opacity') // or whatever 

Mặc dù $el không phải là thực sự hiện diện trong DOM, bạn vẫn có thể truy cập vào tất cả các tiện nghi hiện của nó.

---

Sửa: như đã đề cập trong các ý kiến, phương pháp này không phải lúc nào việc như mong đợi (ví dụ inherited css values không xác định trên .classname một cách rõ ràng, selector specificity trên .classname, vv).

Ví dụ như sau thất bại do #foo tăng độ đặc hiệu selector ngoài của một độc .bar:

css:

#foo .bar { color: red; } 

js:

var $el = $('<div class="bar"></div>'); 
$el.css('color'); // Expected: "red", Actual: "" 

Answer 2

Bạn cần phải phân tích các phong cách từ document.styleSheets.

Answer 3

Xem http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript trong đó trình bày một cách tiếp cận qua trình duyệt để nhận được và thêm css động.

Nó hoạt động với document.styleSheets và cả của .rules IE và mọi người khác của .cssRules

Nó cũng có lợi thế là hơi trừu tượng, do đó bạn không cần phải lo lắng về các chi tiết.

Answer 4

Để workaround vấn đề Chromium , bạn cần phải thêm nó vào cơ thể:

mẫu CSS:

.dummy { 
    min-width: 50px; 
    max-width: 250px; 
} 

mẫu javascript:

$(document).ready(function() { 
    var dummy = $('<div class="dummy" style="display: none;"></div>').appendTo('body'); 
    console.log(dummy.css("min-width")); 
    console.log(dummy.css("max-width")); 
    dummy.remove(); 
}); 

này hoạt động trên tất cả các trình duyệt hiện đại, Chrome, FF, IE11.