JS властивість CSSStyleDeclaration.counterReset

Загальний опис

element.style.counterReset - це властивість CSS, яка використовується для скидання значення лічильника елементу. Ця властивість дозволяє встановлювати початкове значення лічильника для подальшого використання у поєднанні з element.style.counterIncrement.

При використанні element.style.counterReset, спершу потрібно вказати назву лічильника (наприклад, section, item тощо) та початкове значення, на яке буде скинутий лічильник. Наприклад:

let list = document.getElementById('myList');
list.style.counterReset = 'section 1'; // Початкове значення лічильника

Ця властивість корисна при створенні складних списків, таблиць або дизайнів, де потрібно розпочати лічильник з певного числа або скинути його значення для подальшого використання. Наприклад, при створенні вкладених списків, можна скинути лічильник перед початком нового рівня.

Використання element.style.counterReset разом з element.style.counterIncrement дозволяє програмістам ефективно керувати лічильниками та нумерацією елементів на сторінці, що спрощує створення складних дизайнів і структур з автоматичною нумерацією.

правити

Порада

Експериментуйте з комбінуванням element.style.counterReset з умовами, щоб динамічно керувати нумерацією в залежності від певних умов на сторінці. Це дозволяє створювати складні лічильники, які змінюються згідно зі змінами на сторінці.

автор: Bond правити

Порада

Використовуйте element.style.counterReset для створення структурованих списків з різними рівнями вкладеності, де можна скидати лічильник перед кожним новим підсписком. Це допомагає підтримувати логічну нумерацію у складних списках.

автор: Bond правити

Порада

Не забувайте скидати лічильник за необхідності, щоб уникнути непередбачуваних результатів нумерації. Пам'ятайте, що скидання лічильника встановлює його значення знову, тому важливо враховувати моменти, де це може бути необхідно для правильної нумерації.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.counterReset

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="nested-list">перший елемент nested-list</div>
<div class="nested-list">другий елемент nested-list</div>
<ul>
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

let lists = document.querySelectorAll('.nested-list');

lists.forEach((list, index) => {
  list.style.counterReset = 'list ' + (index + 1);
  let items = list.querySelectorAll('li');
  items.forEach((item, i) => {
    item.style.counterIncrement = 'list ' + i;
  });
});

<table id="myTable">
    <tr><td>комірка 1</td><td>комірка 2</td></tr>
</table>

let table = document.getElementById('myTable');
let sections = table.querySelectorAll('tr.section');

sections.forEach((section, index) => {
  section.style.counterReset = 'section ' + (index + 1);
});