Sử dụng javascript để có được phong cách của một phần tử từ một file css bên ngoài

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" media="all" href="style.css"> 
    </head> 

    <body> 
     <div id="test">Testing</div> 

     <script> 
      alert(document.getElementById('test').style.display); 
     </script> 
    </body> 
</html>

Các style.css:

div { 
    display:none; 
}

Tôi hy vọng js sẽ quay trở lại " không có ", nhưng nó trả về một chuỗi rỗng để thay thế. Có cách nào để giải quyết vấn đề này không?

Nguồn

2010-04-01 Alan

Điều này sẽ hoạt động đối với các trình duyệt tuân thủ tiêu chuẩn (không phải IE - currentStyle/runtimeStyle).

<body> 
    <div id="test">Testing</div> 

    <script type="text/javascript"> 
     window.onload = function() { 
      alert(window.getComputedStyle(document.getElementById('test'),null).getPropertyValue('display')); 
     } 
    </script> 
</body>

Nguồn

2010-04-01 04:13:11 Jonathan

Tải thư viện 150kb để làm điều gì đó là một lớp lót trong vanilla JS? Bạn nghiêm túc chứ? –

Cảm ơn. Tuy nhiên, trang của chúng tôi sẽ được sử dụng trên thiết bị di động và chúng tôi cần phải giảm thiểu kích thước của trang. Vì vậy jquery không được khuyến khích. Có cách nào khác có thể đạt được kết quả tương tự không? – Alan

Có thể đáng nói đến trong câu hỏi. Điện thoại di động đặc biệt? Khá ít người không hỗ trợ JS. – Jonathan

Vì màn hình không được đặt trực tiếp dưới dạng thuộc tính kiểu, bạn sẽ không nhận được điều đó bằng cách sử dụng mã ở trên. Bạn phải có được giá trị tính toán.

Bạn có thể tham khảo trang này, Get styles

Để có được giá trị

var displayValue = getStyle("test", "display"); 

function getStyle(el,styleProp) 
{ 
    var x = document.getElementById(el); 
    if (x.currentStyle) 
     var y = x.currentStyle[styleProp]; 
    else if (window.getComputedStyle) 
     var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); 
    return y; 
}

Nguồn

2010-04-01 04:09:50 rahul

Cảm ơn. Nhưng làm thế nào tôi có thể nhận được giá trị tính toán? – Alan

Đã chỉnh sửa câu trả lời của tôi. – rahul

Chức năng này thực sự cơ bản, nó sẽ có vấn đề với tên thuộc tính CSS được tạo thành bởi hai hoặc nhiều từ (ví dụ: 'font-size',' background-color', vv) và phương thức 'getComputedStyle' sẽ được gọi từ' đối tượng document.defaultView', vì không phải tất cả các trình duyệt đều có các thành viên 'defaultView' có sẵn trên đối tượng Global (' window') và có nhiều mâu thuẫn hơn, hãy xem xét việc triển khai này mà tôi đã thực hiện: http://stackoverflow.com/question/2531737/javascript-incapable-of-nhận-yếu tố-max-height-qua-yếu tố-style-maxheight/2531934 # 2531934 – CMS

CSS sẽ không được nạp được nêu ra. Bao bọc JavaScript của bạn trong một sự kiện "sẵn sàng".

<body onload="alert(document.getElementById('test').style.display);">

Điều đó có phù hợp với bạn không?

Nguồn

2010-04-01 04:10:57

Cảm ơn. Có ví dụ nào không? – Alan

không hoạt động = [ – Alan

Sử dụng javascript để có được phong cách của một phần tử từ một file css bên ngoài

Trả lời

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