Thuộc tính HTML DOM clientTop

Thuộc tính HTML DOM clientTop trả về chiều rộng của viền trên của một phần tử tính bằng pixel. Đây là thuộc tính chỉ đọc. Lề trên hoặc padding trên của một phần tử không được bao gồm bởi thuộc tính này.

Cú pháp

Cú pháp sau đây dùng cho thuộc tính clientTop:

element.clientTop;

Ví dụ

Hãy xem một ví dụ cho thuộc tính clientTop:

<!DOCTYPE html> <html> <head> <style> #styleDiv { height: 250px; font-size:35px; text-align:center; width: 400px; padding: 10px; margin: 15px; border-top: 15px solid blue; background-color: lightgreen; } </style> </head> <body> <p>Nhấn nút bên dưới để lấy chiều rộng viền trên của div tính bằng pixel</p> <button onclick="topWidth()">CHIỀU RỘNG TRÊN</button> <div id="styleDiv"> <b>Một div mẫu</b> </div> <p id="Sample"></p> <script> function topWidth() { var x = document.getElementById("styleDiv"); var txt = "Chiều rộng viền trên: " + x.clientTop + "px"; document.getElementById("Sample").innerHTML = txt; } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi nhấn CHIỀU RỘNG TRÊN:

Trong ví dụ trên:

Chúng ta đã tạo một div với id "styleDiv" và có kiểu dáng được áp dụng cho nó bằng id của nó.

#styleDiv { height: 250px; font-size:35px; text-align:center; width: 400px; padding: 10px; margin: 15px; border-top: 15px solid blue; background-color: lightgreen; }

Div:

<div id="styleDiv"> <b>Một div mẫu</b> </div>

Chúng ta đã tạo nút CHIỀU RỘNG TRÊN sẽ thực thi phương thức topWidth() khi nhấp:

<button onclick="topWidth()">CHIỀU RỘNG TRÊN</button>

Phương thức topWidth() lấy phần tử <div> bằng phương thức getElementById() và gán nó cho biến x. Sau đó sử dụng thuộc tính clientTop trên <div>, chúng ta lấy chiều rộng viền trên của nó tính bằng pixel và sau khi nối thêm một số văn bản gán nó cho biến txt. Văn bản bên trong txt sau đó được hiển thị bên trong đoạn văn với id "Sample" bằng thuộc tính innerHTML và gán biến txt cho nó:

function topWidth() { var x = document.getElementById("styleDiv"); var txt = "Chiều rộng viền trên: " + x.clientTop + "px"; document.getElementById("Sample").innerHTML = txt; }