Javascript yếu tố phong cách

Question

tôi tò mò tại sao điều này một

<div class = "overlay"> 
    fdsfsd 
</div> 
.overlay{ 
    width: 100px; 
    height: 200px; 
    background-color:red; 
} 
alert(document.getElementsByClassName("overlay")[0].style.width); 

không cảnh báo gì cả. Tất nhiên tôi có thể viết <div style = "width:100px"> sau đó everthing hoạt động tốt, nhưng nó không tốt cho tôi, tôi cần css. Ở đây bạn có thể tìm thấy jsfiddle demo

Vì vậy, câu hỏi chính xác là: tại sao mã này không cảnh báo chiều rộng của div và cách cảnh báo nếu chiều rộng được đưa ra bởi css?

Answer 1

JavaScript .style chỉ liên quan đến kiểu nội tuyến trên phần tử.

Xem Documentation.

Nếu bạn muốn lấy chiều rộng của một phần tử, bạn nên sử dụng offsetWidth.

document.getElementsByClassName("overlay")[0].offsetWidth 

http://jsfiddle.net/9kwap3zy/7/

Answer 2

Các .style là inline chỉ style="width:100px;" ...

Nếu đó là trong CSS (chứ không phải là inline), bạn cần getComputedStyle -

https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle

Answer 3

Như đã đề cập ở nơi khác, vấn đề là HTMLElement.style truy xuất các giá trị từ style attr ibute của phần tử; như bạn đang đặt phong cách của bạn với CSS, bạn cần phải thay vì sử dụng window.getComputedStyle(element, null).width:

var elem = document.getElementsByClassName("overlay")[0], 
 
    width = window.getComputedStyle(elem, null).width; 
 

 
console.log(width);

.overlay { 
 
    width: 100px; 
 
    height: 200px; 
 
    background-color: red; 
 
}

<div class="overlay"> 
 
    fdsfsd 
 
</div>

Tài liệu tham khảo:

• HTMLElement.style.
• window.getComputedStyle().

Answer 4

Kiểu chỉ cho phép truy cập vào thông tin được đưa vào elem.style. Trong phong cách mẫu của bạn không nói gì về lề được xác định trong CSS. Sử dụng getComputedStyle().

var computedStyle = getComputedStyle(document.getElementsByClassName("overlay")[0], null) 

alert(computedStyle.width); 

jsfiddle demo