Thuộc tính hàng đầu Kiểu DOM HTML trả về và sửa đổi vị trí trên cùng của phần tử HTML được định vị trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
1. Quay lại đầu trang
object.top
2. Sửa đổi đầu
object.top = “value”
Ở đây, giá trị có thể là -
| Sr.No | Giá trị &Giải thích |
|---|---|
| 1 | tên đầu tiên Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| 2 | kế thừa Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| 3 | phần trăm (%) Nó xác định giá trị theo phần trăm chiều rộng của phần tử mẹ. |
| 4 | chiều dài Nó xác định giá trị hàng đầu theo đơn vị độ dài. |
| 5 | tự động Nó cho phép trình duyệt đặt giá trị của vị trí hàng đầu. |
Hãy để chúng tôi xem một ví dụ về Thuộc tính hàng đầu Kiểu DOM HTML -
Ví dụ
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
.square {
width: 100px;
height: 100px;
background: #db133a6b;
position: relative;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style top Property Demo</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Set top position</button>
<script>
function set() {
document.querySelector('.square').style.top = "200px";
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Đặt vị trí trên cùng ”Để đặt vị trí trên cùng của hình vuông màu hồng.
