Computer >> Máy Tính >  >> Lập trình >> HTML

HTML DOM Style outlineStyle Thuộc tính


Thuộc tính DOM style outlineStyle trả về và sửa đổi kiểu 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 phác thảoStyle

object.style.outlineStyle
  • Sửa đổi phác thảo Kiểu dáng

object.style.outlineStyle = “value”

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính style outlineStyle -

<!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 outlineStyle Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add outline</button>
<script>
   function add() {
      document.querySelector('p').style.outlineStyle = "dashed";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Style outlineStyle Thuộc tính

Nhấp vào “ Thêm đường viền ”Để thay đổi kiểu của đường viền xung quanh hộp màu xanh lục.

HTML DOM Style outlineStyle Thuộc tính