Tỷ lệ hình ảnh javascript khi cuộn
|
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 Show 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ẫuLà 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 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à Khu vực 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 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/TopNhữ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 Đó là tổ tiên gần nhất là một trong những điều sau đây
Thuộc tính Trong ví dụ bên dưới, Có một số trường hợp khi
offsetChiều rộng/Chiều caoBâ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
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ó Ví dụ: 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 Xin lưu ý rằng clientTop/LeftBê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 trong ví dụ của chúng tôi
…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 đó, Trong trường hợp đó, Đây là ví dụ trong tiếng Do Thái khách hàngChiều rộng/Chiều caoCá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 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ờ Nếu không có phần đệm thì Vì vậy, khi không có phần đệm, chúng tôi có thể sử dụng cuộnChiều rộng/Chiều caoCác thuộc tính này giống như Trên hình trên
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 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 = cuộnTrái/cuộnTopThuộc tính Trên hình bên dưới, chúng ta có thể thấy Nói cách khác,
Hầu hết các thuộc tính hình học ở đây là chỉ đọc, nhưng có thể thay đổi Nếu bạn nhấp vào phần tử bên dưới, mã Nhấp vào Đặt Không lấy chiều rộng/chiều cao từ CSSChú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 Vậy tại sao không đọc chiều rộng của một phần tử với Tại sao chúng ta nên sử dụng các thuộc tính hình học để thay thế?
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à …Nhưng với 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 Trên Desktop Windows OS, Firefox, Chrome, Edge đều dành chỗ cho thanh cuộn. Nhưng Firefox hiển thị Xin lưu ý rằng sự khác biệt được mô tả chỉ là về việc đọc |
