Thuộc tính DOM style outlineWidth trả về và sửa đổi chiều rộng của đường viền xung quanh một phần tử trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại outlineWidth
object.style.outlineWidth
-
Sửa đổi đường viền rộng
object.style.outlineWidth = “value”
Ví dụ
Hãy để chúng tôi xem một ví dụ về 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>DOM Style outlineWidth Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add outline</button>
<script>
function add() {
document.querySelector('p').style.outlineWidth = "5px";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Thêm đường viền ”Để thay đổi chiều rộng của đường viền xung quanh hộp màu xanh lục.
