Thuộc tính style outline trong HTML DOM

Thuộc tính style.outline trong HTML DOM trả về và cho phép thiết lập viền ngoài (outline) của một phần tử trong tài liệu HTML. Đây là thuộc tính shorthand kết hợp outlineWidth, outlineStyle, outlineColor.

Cú pháp

Lấy giá trị outline

object.style.outline

Thay đổi outline

object.style.outline = "width style color"

Ví dụ

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

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { background-color: seagreen; height: 200px; width: 200px; }
  .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 outline DOM</h1>
<p></p>
<button onclick="add()" class="btn">Thêm outline</button>
<script>
  function add() {
    document.querySelector('p').style.outline = "2px solid #000";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thêm outline để thêm viền ngoài cho hộp màu xanh lá.