Làm cách nào để truy xuất thuộc tính hiển thị của phần tử DOM?

<html> 
    <style type="text/css"> 
     a { 
      display: none; 
     } 
    </style> 
    <body> 
     <p id="p"> a paragraph </p> 
     <a href="http://www.google.com" id="a">google</a> 
    </body> 
    <script type="text/javascript"> 
     var a = (document.getElementById('a')).style; 
     alert(a.display); 
     var p = (document.getElementById('p')).style; 
     alert(p.display); 
     p.display = 'none'; 
     alert(p.display); 
    </script> 
</html>

Đầu tiên và thứ hai alert không hiển thị gì ngoài chuỗi rỗng, mà tôi nghĩ là none và block. Tuy nhiên sau khi cài đặt display intensionally, thứ ba alert cuối cùng cảnh báo none.Làm cách nào để truy xuất thuộc tính hiển thị của phần tử DOM?

Nhưng tại sao? Làm cách nào tôi có thể truy xuất thuộc tính display một cách chính xác?

Cảm ơn.

Nguồn

2010-09-23 Jichao

Các thuộc tính .style.* ánh xạ trực tiếp lên stylethuộc tính, không áp dụng cho kiểu được áp dụng. Đối với điều đó bạn muốn getComputedStyle.

Tôi muốn cân nhắc nghiêm túc để chuyển đổi .className và tách bản trình bày khỏi logic hoàn toàn.

Nguồn

2010-09-23 12:30:22 Quentin

không được gọi là thuộc tính. Nó là một đối tượng. Mỗi nút phần tử DOM có thuộc tính kiểu. Thuộc tính này là một đối tượng. ... Thuộc tính kiểu HTML được sử dụng để thêm thuộc tính vào thuộc tính kiểu của nút DOM đại diện cho phần tử HTML. Khi mã HTML được phân tích cú pháp, chúng tôi không có thuộc tính HTML nữa, nhưng thuộc tính đối tượng. –

@ Šime Vidas: Tôi nghĩ nếu bạn đọc lại câu trả lời của David, bạn sẽ nhận ra rằng anh ta đã rút ra sự khác biệt một cách chính xác. –

@David Dorward: Cảm ơn sự giúp đỡ của bạn. Vì vậy, việc sử dụng thuộc tính 'style' là gì vì nó không thể phản ánh sự thay đổi thời gian thực của kiểu CSS? – Jichao

Bạn cần giá trị được tính của thuộc tính hiển thị cho phần tử. Bạn có thể nhận được điều này như sau. Lưu ý rằng hầu hết các trình duyệt hỗ trợ window.getComputedStyle() trong khi tương đương gần nhất trong IE là tài sản currentStyle của phần tử:

var el = document.getElementById('a'); 
var styleObj; 

if (typeof window.getComputedStyle != "undefined") { 
    styleObj = window.getComputedStyle(el, null); 
} else if (el.currentStyle != "undefined") { 
    styleObj = el.currentStyle; 
} 

if (styleObj) { 
    alert(styleObj.display); 
}

Nguồn

2010-09-23 12:38:37

Nếu bạn có thể sử dụng jQuery, có một phương pháp gọi là .is

Để kiểm tra xem một cái gì đó không được hiển thị, Tôi muốn làm ... $('someSelector').is(':visible') ...

Điều này sẽ trả về false nếu thuộc tính hiển thị được đặt thành Không.

Nguồn

2010-09-23 12:40:20

Tôi khuyên bạn nên sử dụng thư viện JavaScript để nhận kiểu được tính toán. Ví dụ, sử dụng jQuery bạn có thể lấy phong cách tính toán với phương pháp css() ...

$("#a").css("display");

Phương pháp css() là một giải pháp qua trình duyệt vì nó trong nội bộ sử dụng các đối tượng phong cách và cả hai phương pháp getComputedStyle và đối tượng currentStyle.

Nguồn

2010-09-23 16:30:00

Làm cách nào để truy xuất thuộc tính hiển thị của phần tử DOM?

Trả lời

Các vấn đề liên quan