Thuộc tính listStyle trong HTML DOM Style

Giới thiệu

Thuộc tính listStyle trong HTML DOM Style là shorthand dùng để thiết lập hoặc lấy ba thuộc tính cùng lúc: list-style-type, list-style-position và list-style-image.

Cú pháp

Thiết lập listStyle:

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

Tham số

Tham số	Mô tả
type	Kiểu dấu mục (xem listStyleType).
position	Vị trí dấu mục (outside/inside).
image	Hình ảnh làm dấu mục (url hoặc none).
initial	Đặt về mặc định.
inherit	Kế thừa từ cha.

Ví dụ

Ví dụ thay đổi list-style thành upper-roman (chỉ thiết lập type).

<!DOCTYPE html> <html> <head> <script> 
  function changeListStyle() { 
    document.getElementById("LIST1").style.listStyle = "upper-roman"; 
    document.getElementById("Sample").innerHTML = "List style đã đổi thành upper Roman"; 
  } 
</script> </head> <body> 
  <ul id="LIST1"> 
    <li>MANGO</li> 
    <li>GUAVA</li> 
    <li>LITCHI</li> 
    <li>WATERMELON</li> 
  </ul> 
  <p>Nhấn nút để thay đổi list style</p> 
  <button type="button" onclick="changeListStyle()">Thay đổi list style</button> 
  <p id="Sample"></p> 
</body> </html>

Kết quả

Thuộc tính listStyle trong HTML DOM Style

Sau khi nhấn nút Thay đổi List Style:

Thuộc tính listStyle trong HTML DOM Style