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

Cách thiết lập listStyleImage, listStylePosition, listStyleType trong một khai báo với JavaScript

Thuộc tính listStyle là shorthand kết hợp list-style-type, list-style-position và list-style-image trong một dòng.

Ví dụ minh họa

Nhấn nút để đặt bullet hình tròn (circle) ở vị trí outside:

<!DOCTYPE html>
<html>
<body>
  <ol id="myID">
    <li>Một</li>
    <li>Hai</li>
  </ol>
  <button type="button" onclick="display()">Thay đổi kiểu</button>
  <script>
    function display() {
      document.getElementById("myID").style.listStyle = "circle outside";
    }
  </script>
</body>
</html>

Cú pháp listStyle

listStyle: <type> <position> <image> (thứ tự tùy ý, image cuối)

  • type: disc, circle, square, decimal, lower-roman, none, v.v.
  • position: inside, outside
  • image: url('...') hoặc none

Ví dụ: listStyle: "square inside url('bullet.png')"