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Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад дозволяє користувачу ввести початкове значення лічильника для елементів списку за допомогою форми та кнопки. Після застосування значення, номери елементів списку змінюються відповідно до введеного початкового значення, наочно демонструючи роботу властивості element.style.counterReset.
У цьому прикладі кожен рядок з класом 'section' у таблиці отримує свій власний номер розділу. Це дозволяє автоматично нумерувати та відокремлювати розділи в таблиці, полегшуючи навігацію та редагування даних.
let table = document.getElementById('myTable');
let sections = table.querySelectorAll('tr.section');
sections.forEach((section, index) => {
section.style.counterReset = 'section ' + (index + 1);
});У даному прикладі кожен елемент списку отримує свій власний номер у вкладеному списку. Це дозволяє створювати складні ієрархічні списки з коректною нумерацією, що полегшує розуміння структури та логіки даних.
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;
});
});