Thuộc tính style outlineOffset trong HTML DOM

Thuộc tính style.outlineOffset trong HTML DOM trả về và cho phép thiết lập khoảng cách (offset) của viền ngoài (outline) quanh một phần tử trong tài liệu HTML. Khoảng cách này tạo khoảng trống giữa border và outline.

Cú pháp

Lấy giá trị outlineOffset

object.style.outlineOffset

Thay đổi outlineOffset

object.style.outlineOffset = "value"

Ví dụ

Ví dụ sử dụng thuộc tính style.outlineOffset:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { background-color: seagreen; height: 200px; width: 200px; outline: 3px solid #000; border: 3px solid #fff; margin: 1.5rem auto; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính style outlineOffset DOM</h1>
<p></p>
<button onclick="add()" class="btn">Thêm offset</button>
<script>
  function add() {
    document.querySelector('p').style.outlineOffset = "8px";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thêm offset để thêm khoảng cách outline quanh hộp màu xanh lá.