Thuộc tính HTML DOM Style right trả về và sửa đổi vị trí bên phải 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 quyền
object.right
2. Quyền sửa đổi
object.right = “value”
Ở đây, giá trị có thể là -
| Sr.No | Giá trị &Giải thích |
|---|---|
| 1 | ban đầu Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| 2 | inherit 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 | length Nó xác định giá trị ngay trong đơn vị độ dài. |
| 5 | auto Nó cho phép trình duyệt đặt giá trị của đúng vị trí. |
Hãy để chúng tôi xem một ví dụ về Thuộc tính quyền 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 right Property Demo</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Set right position</button>
<script>
function set() {
document.querySelector('.square').style.right = "-400px";
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Đặt đúng vị trí ”Để đặt đúng vị trí của hình vuông màu hồng.
