Thuộc tính HTML DOM Style objectPosition trả về và sửa đổi cách định vị phần tử hình ảnh hoặc video trong hộp nội dung của chính nó trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
1. Trả về đối tượngPosition
object.objectPosition
2. Sửa đổi objectPosition
object.objectPosition = “value”
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| Ban đầu | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| Kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| Chức vụ | Nó thể hiện vị trí của phần tử hình ảnh hoặc video bên trong hộp nội dung của nó. |
Hãy để chúng tôi xem một ví dụ về Thuộc tính vị trí đối tượng HTML DOM Style -
Ví dụ
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.img-class {
width: 200px;
height: 250px;
object-fit: cover;
}
</style>
<body>
<h1 style="text-align:center">DOM Style objectPosition Property Demo</h1>
<img alt="Learn Java Swing" src="https://www.tutorialspoint.com/swing/images/swing-mini-logo.jpg" class="img-class" width='300' height='200'>
<button class="btn" onclick="set()">Set objectPosition</button>
<script>
function set() {
document.querySelector('.img-class').style.objectPosition = "100% 100%";
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Đặt vị trí đối tượng ”Để đặt thuộc tính vị trí đối tượng trên phần tử hình ảnh -
