cssom-name-setter.html (955B)
1 <!DOCTYPE html> 2 <title>CSSCounterStyleRule name setter</title> 3 <link rel="help" href="https://www.w3.org/TR/css-counter-styles-3/#the-csscounterstylerule-interface"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <link rel="match" href="cssom-name-setter-ref.html"> 6 <style id="sheet"> 7 @counter-style foo { 8 system: fixed; 9 symbols: A B C; 10 } 11 12 @counter-style bar { 13 system: fixed; 14 symbols: '1' '2' '3'; 15 } 16 17 @counter-style foo { 18 system: fixed; 19 symbols: X Y Z; 20 } 21 </style> 22 23 <ol style="list-style-type: foo; list-style-position: inside"> 24 <li></li> 25 <li></li> 26 <li></li> 27 </ol> 28 29 <ol style="list-style-type: bar; list-style-position: inside"> 30 <li></li> 31 <li></li> 32 <li></li> 33 </ol> 34 35 <script> 36 // Force layout update before changing the rule 37 document.body.offsetWidth; 38 39 // Change the last counter style name from 'foo' to 'bar' 40 const sheet = document.getElementById('sheet'); 41 const rule = sheet.sheet.rules[2]; 42 rule.name = 'bar'; 43 </script>