Thuộc tính objectPosition của Style trong HTML DOM

Thuộc tính objectPosition của Style trong HTML DOM trả về và cho phép sửa đổi cách một phần tử hình ảnh hoặc video được định vị trong hộp nội dung (content box) của chính nó trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

1. Lấy giá trị objectPosition

object.objectPosition

2. Thiết lập objectPosition

object.objectPosition = "value"

Ở đây, value có thể là:

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính objectPosition của Style:

<!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">Demo thuộc tính objectPosition của Style</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()">Thiết lập objectPosition</button>
<script>
  function set() {
    document.querySelector('.img-class').style.objectPosition = "100% 100%";
  }
</script>
</body>
</html>

Kết quả

Nhấn vào nút "Thiết lập objectPosition" để đặt thuộc tính vị trí đối tượng trên phần tử hình ảnh: