Thuộc tính top của Style trong HTML DOM trả về và cho phép sửa đổi vị trí trên cùng (top position) của một phần tử HTML đã được định vị (positioned) trong tài liệu HTML.
Cú pháp
Cú pháp như sau:
1. Lấy giá trị top
object.top
2. Thiết lập top
object.top = "value"
Ở đây, value có thể là:
| STT | Giá trị & Giải thích |
|---|---|
| 1 | initial Đặt thuộc tính này về giá trị mặc định. |
| 2 | inherit Kế thừa giá trị thuộc tính từ phần tử cha. |
| 3 | percentage(%) Định nghĩa giá trị theo phần trăm chiều rộng của phần tử cha. |
| 4 | length Định nghĩa giá trị top theo đơn vị độ dài. |
| 5 | auto Để trình duyệt tự đặt giá trị vị trí top. |
Ví dụ
Dưới đây là ví dụ minh họa thuộc tính top của Style:
<!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>Demo thuộc tính top của Style</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Đặt vị trí top</button>
<script>
function set() {
document.querySelector('.square').style.top = "200px";
}
</script>
</body>
</html>
Kết quả
Nhấn vào nút "Đặt vị trí top" để đặt vị trí top của hình vuông màu hồng.
