HTML DOM Style list

Thuộc tính HTML DOM Style listStyle được sử dụng để thiết lập hoặc trả về ba thuộc tính có tên là list-style-type, list-style-position và list-style-image.

Sau đây là cú pháp cho -

Đặt thuộc tính listStyle -

object.style.listStyle = "type position image|initial|inherit"

Các thuộc tính trên được giải thích như sau -

Tham số	Mô tả
loại	Xác định lại loại điểm đánh dấu mục danh sách.
vị trí	Xác nhận vị trí điểm đánh dấu mục danh sách
hình ảnh	Xác định sai bộ ảnh làm điểm đánh dấu mục danh sách.
tên ban đầu	Đang xác nhận thuộc tính này về giá trị ban đầu.
kế thừa	Kế thừa giá trị thuộc tính mẹ

Chúng ta hãy xem một ví dụ cho thuộc tính listStyle -

Ví dụ

<!DOCTYPE html>
<html>
<head>
<script>
   function changeListStyle() {
      document.getElementById("LIST1").style.listStyle = "upper-roman";
      document.getElementById("Sample").innerHTML="The list style has been changed to upper Roman";
   }
</script>
</head>
<body>
   <ul id="LIST1">
      <li>MANGO</li>
      <li>GUAVA</li>
      <li>LITCHI</li>
      <li>WATERMELON</li>
   </ul>
   <p>Click the below button to change the list style for the above div</p>
   <button type="button" onclick="changeListStyle()">Change list style</button>
   <p id="Sample"></p>
</body>
</html>

Đầu ra

HTML DOM Style list

Khi nhấp vào nút “ Thay đổi kiểu danh sách Nút ”-

HTML DOM Style list