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

Thuộc tính style.right trong HTML DOM dùng để **lấy hoặc đặt** vị trí bên phải của một phần tử **được định vị (positioned element)** — tức là có position là relative, absolute, fixed, hoặc sticky. Giá trị xác định khoảng cách từ mép phải của **containing block** (khối chứa) đến mép phải của phần tử.

Cú pháp

// Lấy giá trị (string, có đơn vị)
var rightVal = element.style.right;

// Đặt giá trị
element.style.right = "20px"; // hoặc "10%", "auto", "inherit", "initial"

Các giá trị hợp lệ

Ví dụ: Di chuyển hộp vuông sang phải

<!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; }
  .box {
    width: 100px; height: 100px; background: #db133a6b;
    position: relative; /* Bắt buộc để right hoạt động */
  }
  .show { font-size: 1.2rem; margin: 1rem 0; }

<body>
  <h1>Demo: style.right</h1>
  <div class="box" id="box"></div>
  <button onclick="moveRight()" class="btn">Đẩy sang phải 400px</button>
  <div class="show" id="msg"></div>
  <script>
    function moveRight() {
      var box = document.getElementById('box');
      box.style.right = "-400px"; // Âm = đẩy ra ngoài bên phải
      document.getElementById('msg').textContent = "right = " + box.style.right;
    }
  </script>
</body>
</html>

Kết quả:

Nhấn nút → Hộp vuông hồng dịch chuyển 400px ra khỏi màn hình bên phải (vì right: -400px đẩy mép phải của box ra xa mép phải container 400px).

Lưu ý quan trọng

• Chỉ hoạt động khi position != static (mặc định). Phải set position: relative/absolute/fixed/sticky trước.
• right và left cùng set: left ưu tiên (trừ khi direction: rtl).
• element.style.right chỉ đọc/ghi **inline style**. Để đọc computed style (kế thừa từ CSS): getComputedStyle(el).right.
• Dùng right: 0 + position: fixed/absolute để dính mép phải màn hình/container.

Ứng dụng thực tế

• Menu trượt (sidebar) từ phải: right: -300px → right: 0 (transition).
• Tooltip/popover định vị so với mép phải.
• Layout RTL (right-to-left) languages.