Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Thuộc tính style outlineWidth trong HTML DOM

Thuộc tính style.outlineWidth trong HTML DOM trả về và cho phép thay đổi độ rộng (width) của viền ngoài (outline) quanh một phần tử trong tài liệu HTML.

Cú pháp

Lấy giá trị outlineWidth

object.style.outlineWidth

Thay đổi outlineWidth

object.style.outlineWidth = "value"

Ví dụ

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

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

Kết quả

Nhấn nút Thêm outline để thay đổi độ rộng viền ngoài quanh hộp màu xanh lá.