Blog này minh họa việc sử dụng phần tử DOM chiều cao khách hàng trong HTML.
Làm cách nào để sử dụng Phần tử DOM “clientHeight” trong HTML?
Các ' chiều cao khách hàng ” cho phép nhà phát triển tính toán chiều cao của nội dung hiển thị của phần tử. Nó giúp định vị các phần tử tương đối với nhau hoặc xác định xem người dùng đã cuộn sang cạnh phải của vùng chứa có thể cuộn hay chưa. Nó cũng cung cấp thông tin về không gian chưa sử dụng còn lại trên trang web.
Ví dụ
Chúng ta hãy xem qua một ví dụ để minh họa rõ hơn về thuộc tính “clientHeight”. Ví dụ, “ trong một cái nhấp chuột ” trình nghe sự kiện được sử dụng để hiển thị kết quả được cung cấp bởi “ chiều cao khách hàng ' tài sản:
< thân hình >
< h2 nhận dạng = 'yếu tố' >< / h2 >
< h2 nhận dạng = 'yếu tố' trong một cái nhấp chuột = 'showelementHeight()' >
Nhấp vào Bài viết Linuxhint để hiển thị Chiều cao!
< / h2 >
< kịch bản >
hàm showelementHeight() {
ví dụ var = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Chiều cao là: ' + elementHeight + ' pixel.');
}
< / kịch bản > >
< / thân hình >
Phần giải thích của đoạn mã trên được mô tả bên dưới:
- Ban đầu, hãy tạo một “ ” thẻ bên trong “ ” và cung cấp một số dữ liệu giả cho nó. Ngoài ra, chỉ định một id của “ yếu tố ” vào phần tử HTML đã chọn.
- Tiếp theo, thêm một “ trong một cái nhấp chuột() ” người nghe sự kiện gọi “ showelementHeight() ” chức năng khi người dùng nhấp vào “ ' yếu tố.
- Sau đó, bên trong “ showelementHeight() ” hàm tạo một biến có tên là “ ví dụ ” hoạt động như một thể hiện cho phần tử HTML có id là “ yếu tố ”.
- Tiếp theo, tạo một biến khác có tên “ phần tửchiều cao ’’ lưu trữ kết quả được cung cấp bởi thuộc tính “clientHeight”.
- Sau đó, hiển thị “ phần tửchiều cao ’’ biến trên hộp cảnh báo bằng cách sử dụng nút “ báo động() ' phương pháp.
Cuối cùng, hãy thêm các thuộc tính CSS sau để tạo kiểu cho “ h2 ' yếu tố:
< phong cách >
#yếu tố {
lề: 20px;
phần đệm: 10px;
lý lịch- màu sắc : màu lục lam đậm;
chiều cao : 300px;
chữ- căn chỉnh : trung tâm;
đường kẻ- chiều cao : 100px;
}
< / phong cách >
Trong đoạn mã trên, các thuộc tính CSS sau được gán cho div có id là “ yếu tố ”:
- Các ' 20px ”, “ 10px ' Và ' màu lục lam đậm ” các giá trị được cung cấp cho CSS “ lề ”, “ đệm ' Và ' màu nền ” thuộc tính, tương ứng.
- Cũng sử dụng “ chiều cao ”, “ căn chỉnh văn bản ' Và ' chiều cao giữa các dòng ” Thuộc tính CSS để nâng cao khả năng hiển thị của người dùng.
Sau khi thực thi đoạn mã trên, trang web sẽ xuất hiện như sau:
Đầu ra hiển thị rằng chiều cao của phần tử đã chọn được hiển thị trong hộp cảnh báo, bất cứ khi nào người dùng nhấp vào phần tử.
Phần kết luận
Để tận dụng “ chiều cao khách hàng ” trong HTML, hãy chọn phần tử HTML bằng cách truy cập thuộc tính id. Sau đó, đính kèm thuộc tính “clientHeight” và hiển thị kết quả. Nó là thuộc tính chỉ đọc và trả về kết quả bằng pixel. Thuộc tính “clientHeight” hoạt động bên trong thẻ “