Có nhiều thuộc tính JavaScript cho phép chúng tôi đọc thông tin về chiều rộng, chiều cao của phần tử và các tính năng hình học khác
Chúng ta thường cần chúng khi di chuyển hoặc định vị các phần tử trong JavaScript
yếu tố mẫu
Là một phần tử mẫu để chứng minh các thuộc tính, chúng tôi sẽ sử dụng phần tử được cung cấp bên dưới
...Text...
#example {
width: 300px;
height: 200px;
border: 25px solid #E8C48F;
padding: 20px;
overflow: auto;
}
Nó có đường viền, phần đệm và cuộn. Bộ đầy đủ các tính năng. Không có lề vì chúng không phải là một phần của chính phần tử và không có thuộc tính đặc biệt nào cho chúng
Phần tử trông như thế này
Bạn có thể mở tài liệu trong sandbox
Nhớ thanh cuộn
Hình trên minh họa trường hợp phức tạp nhất khi phần tử có thanh cuộn. Một số trình duyệt [không phải tất cả] dành không gian cho nó bằng cách lấy nó từ nội dung [được gắn nhãn là “chiều rộng nội dung” ở trên]
Vì vậy, nếu không có thanh cuộn, chiều rộng nội dung sẽ là
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Khu vực
0 có thể chứa đầy văn bản
Thông thường, phần đệm được hiển thị trống trên hình minh họa của chúng tôi, nhưng nếu có nhiều văn bản trong phần tử và nó tràn ra ngoài, thì trình duyệt sẽ hiển thị văn bản "tràn" ở mức
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
hình học
Đây là bức tranh tổng thể với các thuộc tính hình học
Giá trị của các thuộc tính này là các số kỹ thuật, nhưng những số này là "pixel", vì vậy đây là các phép đo pixel
Hãy bắt đầu khám phá các thuộc tính bắt đầu từ bên ngoài của phần tử
offsetParent, offsetLeft/Top
Những thuộc tính này hiếm khi cần thiết, nhưng chúng vẫn là những thuộc tính hình học “bên ngoài nhất”, vì vậy chúng ta sẽ bắt đầu với chúng
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Đó là tổ tiên gần nhất là một trong những điều sau đây
- Định vị CSS [
2 là
3,
4,
5 hoặc
6] hoặc
7,
8, hoặc
9, hoặc
00
Thuộc tính
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Trong ví dụ bên dưới,
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Có một số trường hợp khi
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
- Đối với các yếu tố không được hiển thị [
10 hoặc không có trong tài liệu] - Cho
00 và
12 - Đối với các phần tử có
13
offsetChiều rộng/Chiều cao
Bây giờ hãy chuyển sang phần tử chính nó
Hai thuộc tính này là những thuộc tính đơn giản nhất. Chúng cung cấp chiều rộng/chiều cao “bên ngoài” của phần tử. Hay nói cách khác, kích thước đầy đủ của nó bao gồm cả viền
Đối với phần tử mẫu của chúng tôi
14 – chiều rộng bên ngoài, có thể được tính bằng chiều rộng CSS bên trong [
7] cộng với phần đệm [
16] và đường viền [
17]
18 – chiều cao bên ngoài
Các thuộc tính hình học bằng 0/null đối với các phần tử không được hiển thị
Các thuộc tính hình học chỉ được tính cho các phần tử được hiển thị
Nếu một phần tử [hoặc bất kỳ tổ tiên nào của nó] có
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Ví dụ:
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Chúng ta có thể sử dụng điều này để kiểm tra xem một phần tử có bị ẩn hay không, như thế này
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Xin lưu ý rằng
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
clientTop/Left
Bên trong phần tử chúng ta có các đường viền
Để đo lường chúng, có các thuộc tính
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
trong ví dụ của chúng tôi
12 – chiều rộng đường viền bên trái
13 – chiều rộng đường viền trên cùng
…Nhưng chính xác hơn – những thuộc tính này không phải là chiều rộng/chiều cao của đường viền, mà là tọa độ tương đối của mặt trong so với mặt ngoài
Có gì khác biệt?
Nó hiển thị khi tài liệu ở chế độ từ phải sang trái [hệ điều hành bằng ngôn ngữ Ả Rập hoặc tiếng Do Thái]. Khi đó, thanh cuộn không ở bên phải mà ở bên trái, sau đó,
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Trong trường hợp đó,
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Đây là ví dụ trong tiếng Do Thái
khách hàngChiều rộng/Chiều cao
Các thuộc tính này cung cấp kích thước của khu vực bên trong đường viền phần tử
Chúng bao gồm chiều rộng nội dung cùng với phần đệm, nhưng không có thanh cuộn
Ở hình trên, trước tiên hãy xem xét
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Không có thanh cuộn ngang, vì vậy nó chính xác là tổng của những gì bên trong đường viền. Chiều cao CSS ________ 419 cộng với phần đệm trên và dưới [________ 216] tổng cộng _________ 571
Bây giờ
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Nếu không có phần đệm thì
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Vì vậy, khi không có phần đệm, chúng tôi có thể sử dụng
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
cuộnChiều rộng/Chiều cao
Các thuộc tính này giống như
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Trên hình trên
81 – là toàn bộ chiều cao bên trong của khu vực nội dung bao gồm các phần được cuộn ra
82 – là toàn bộ chiều rộng bên trong, ở đây chúng ta không có cuộn ngang nên nó bằng
72
Chúng ta có thể sử dụng các thuộc tính này để mở rộng phần tử theo chiều rộng/chiều cao đầy đủ của nó
Như thế này
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Nhấp vào nút để mở rộng phần tử
văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản văn bản
yếu tố. Phong cách. chiều cao =
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
cuộnTrái/cuộnTop
Thuộc tính
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Trên hình bên dưới, chúng ta có thể thấy
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Nói cách khác,
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
85 có thể được sửa đổi
Hầu hết các thuộc tính hình học ở đây là chỉ đọc, nhưng có thể thay đổi
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Nếu bạn nhấp vào phần tử bên dưới, mã
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Nhấp vào
Tôi
1
2
3
4
5
6
7
8
9
Đặt
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Không lấy chiều rộng/chiều cao từ CSS
Chúng tôi vừa trình bày các thuộc tính hình học của các phần tử DOM, có thể được sử dụng để lấy chiều rộng, chiều cao và tính toán khoảng cách
Nhưng như chúng ta đã biết từ chương Kiểu và lớp, chúng ta có thể đọc chiều cao và chiều rộng CSS bằng cách sử dụng
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Vậy tại sao không đọc chiều rộng của một phần tử với
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Tại sao chúng ta nên sử dụng các thuộc tính hình học để thay thế?
Đầu tiên, CSS
98 phụ thuộc vào một thuộc tính khác.
99 xác định chiều rộng và chiều cao CSS “là gì”. Thay đổi trong
99 cho mục đích CSS có thể phá vỡ JavaScript đóThứ hai, CSS
98 có thể là
02, chẳng hạn đối với phần tử nội tuyến
1Từ quan điểm CSS,
03 là hoàn toàn bình thường, nhưng trong JavaScript, chúng tôi cần một kích thước chính xác trong
04 mà chúng tôi có thể sử dụng trong tính toán. Vì vậy, ở đây chiều rộng CSS là vô dụng
Và còn một lý do nữa. một thanh cuộn. Đôi khi mã hoạt động tốt mà không có thanh cuộn lại gặp lỗi vì thanh cuộn lấy không gian từ nội dung trong một số trình duyệt. Vì vậy, chiều rộng thực có sẵn cho nội dung nhỏ hơn chiều rộng CSS. Và
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
…Nhưng với
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Nếu trình duyệt của bạn dành không gian cho thanh cuộn [hầu hết các trình duyệt dành cho Windows đều có], thì bạn có thể kiểm tra nó bên dưới
Phần tử có văn bản có CSS
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Trên Desktop Windows OS, Firefox, Chrome, Edge đều dành chỗ cho thanh cuộn. Nhưng Firefox hiển thị
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180
Xin lưu ý rằng sự khác biệt được mô tả chỉ là về việc đọc
...
alert[example.offsetParent.id]; // main
alert[example.offsetLeft]; // 180 [note: a number, not a string "180px"]
alert[example.offsetTop]; // 180