Test all list style types - Javascript CSS Style Property

Javascript examples for CSS Style Property:listStyleType

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. listStyleType

Description

Test all list style types

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<ol id="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Water</li>
  <li>Soda</li>
</ol>/*from  ww  w .  ja  v  a 2s.c o  m*/
<br>

<select onchange="myFunction(this);" size="22">
  <option>armenian</option>
  <option>circle</option>
  <option>cjk-ideographic</option>
  <option>decimal</option>
  <option>decimal-leading-zero</option>
  <option>disc</option>
  <option>georgian</option>
  <option>hebrew</option>
  <option>hiragana</option>
  <option>hiragana-iroha</option>
  <option>inherit</option>
  <option>katakana</option>
  <option>katakana-iroha</option>
  <option>lower-alpha</option>
  <option>lower-greek</option>
  <option>lower-latin</option>
  <option>lower-roman</option>
  <option>none</option>
  <option>square</option>
  <option>upper-alpha</option>
  <option>upper-latin</option>
  <option>upper-roman</option>
</select>

<script>
function myFunction(selectTag) {
    var listValue = selectTag.options[selectTag.selectedIndex].text;
    document.getElementById("myList").style.listStyleType = listValue;
}
</script>

</body>
</html>

Related Tutorials