Vấn đề Firefox với currentStyle vs getComputedStyle

Question

Tôi cố gắng lấy chiều rộng của một phần tử theo các quy tắc CSS của nó Vấn đề là "getComputedStyle" trả về giá trị pixel thay vì "tự động" cho một phần tử không có giá trị độ rộng CSS. Trong Opera, "elem.currentStyle ['width']" trả về "tự động", nhưng trong firefox, nó phải sử dụng "getComputedStyle" trả về một cái gì đó như "1149px".

Điều quan trọng là tôi phải biết quy tắc CSS thực sự là gì. Có cách nào để làm điều này bên cạnh việc bên cạnh getComputedStyle? The Firefox MDN làm cho nó rõ ràng "getComputedStyle" không phải là con đường để đi, nhưng tôi không thể tìm thấy bất kỳ tài liệu cho một Firefox tương đương với "currentStyle".

Nếu bạn muốn biết, mục tiêu cuối cùng của tôi là tìm phần tử chiều rộng tĩnh lớn nhất trên trang. Nếu tôi không thể đọc giá trị biểu định kiểu - chỉ các giá trị được hiển thị/tính toán - thì làm cách nào để tôi có thể đạt được điều này?

Answer 1

Nếu bạn bắt đầu với một phần tử, không có cách nào để biết quy tắc biểu định kiểu nào được áp dụng cho nó. getComputedStyle() chỉ cung cấp cho bạn giá trị kiểu hiệu quả và currentStyle không có nhiều khác biệt mặc dù nó sẽ cho bạn kết quả bạn mong đợi trong trường hợp cụ thể này và trình duyệt cụ thể này.

Điều bạn có thể cần làm là đi qua bảng định kiểu thay thế. Dọc theo dòng:

for (var i = 0; i < document.styleSheets.length; i++) 
{ 
    var styleSheet = document.styleSheets[i]; 
    for (var j = 0; j < styleSheet.cssRules.length; j++) 
    { 
    var rule = styleSheet.cssRules[j]; 
    if (rule.type == 1) // STYLE_RULE 
    { 
     // Do something with rule.style.width 
    } 
    } 
} 

Nếu sau đó bạn cần phải xác định vị trí các yếu tố phù hợp mà cai trị, bạn có thể sử dụng document.querySelectorAll() với rule.selectorText. Vấn đề còn lại là nhiều quy tắc kiểu có thể áp dụng cho cùng một phần tử và tính đặc trưng của quy tắc cần phải được tính toán. Tuy nhiên, không chắc chắn đây là vấn đề với bạn.

Tài liệu bổ sung:

• CSSStyleSheet
• CSSStyleRule

Answer 2

nếu bạn chỉ muốn có được chiều của phần tử, tại sao không sử dụng

element.clientWidth hay element.clientHeight

các getcomputestyle không được thiết kế để lấy chiều rộng hoặc chiều cao của phần tử

Answer 3

Thật không may, như xa như tôi biết không có cách thực tế để đạt được điều này.

Chỉnh sửa: Câu trả lời ở trên lặp qua các tờ định kiểu là đặt cược tốt nhất của bạn. Ban đầu tôi nghĩ đến việc truy cập bảng định kiểu nhưng không nghĩ đến việc sử dụng querySelectorAll. Đội mũ Wladimir cho một giải pháp thiên tài.

-

Giải pháp duy nhất tôi có thể nghĩ đến là cho các yếu tố bạn đang thiết có chiều rộng tới, cũng thiết lập một số phong cách sử dụng khác thường khác để cái gì đó sẽ không thực sự ảnh hưởng đến bất cứ điều gì, vì vậy bạn có thể kiểm tra cho điều đó.

div { 
    width: 35px; 
    min-width: 1px; /* the flag */ 
    } 

Vì vậy, sau đó khi tìm kiếm các yếu tố có chiều rộng chỉ định, bạn có thể tìm kiếm [ComputedStyle] .minWidth == '1px' đầu tiên.

Khá một giải pháp hacky nhưng nó sẽ hoàn thành công việc.

Bạn cũng có thể đặt tên lớp ngẫu nhiên cho các phần tử có chiều rộng đã đặt, sau đó tất cả những gì bạn phải làm là truy vấn cho các phần tử có tên lớp đó. Mặc dù nó không phải là một giải pháp rất năng động.