Tại sao trình duyệt trả về chuỗi trống trên style.height? Làm thế nào để có được chiều cao thực tế của một phần tử?

Question

đơn giản một dòng html:

<div onclick="alert(this.style.height)">sometext</div>

và cảnh báo cho:

http://i55.tinypic.com/2rxdtgo.png

nhưng nó phải là như 10px hoặc sth như thế.

Answer 1

Khi bạn sử dụng this.style.height, chiều cao phải được xác định trên phần tử đầu tiên, như thế này:

<div style="height: 15px;" onclick="alert(this.style.height)">sometext</div> 

Nếu không, có lẽ bạn nên sử dụng offsetHeight hoặc clientHeight:

<div onclick="alert(this.offsetHeight)">sometext</div> 

Answer 2

Đoán của tôi là bạn không thực sự có bất kỳ quy tắc kiểu nào thiết lập chiều cao của phần tử. Để có chiều cao được hiển thị thực tế của một phần tử, hãy sử dụng element.clientHeight.

Answer 3

Sử dụng ứng dụng kháchHeight hoặc offsetHeight. Kiểm tra url này

http://help.dottoro.com/ljuxqbfx.php

Answer 4

object.style.whatever chỉ trả về các giá trị đã được thiết lập bằng cách sử dụng thuộc tính style trong đánh dấu, hoặc tài sản theo phong cách trong kịch bản, như sau:

<div style="height:10px" onclick="alert(this.style.height)">sometext</div> 

hoặc

theDiv.style.height = "10px"; 

Phương thức getComputedStyle cho phép bạn truy cập các thuộc tính kiểu, vì chúng được xác định bởi tầng (tức là sử dụng @style như trên, hoặc <stylesheet>...</stylesheet> hoặc bất kỳ cơ chế nào)

CHỈNH SỬA: Có thể giúp bạn sử dụng thư viện JS trình duyệt được thiết lập trực tiếp, và phải đối phó với các quirks của các trình duyệt đa dạng. Các phiên bản cũ hơn của IE (ví dụ) không hỗ trợ phương thức này.