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

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

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

Для використання element.style.counterIncrement спочатку потрібно визначити лічильник у CSS за допомогою counter-reset, а потім вказати, як саме збільшувати або зменшувати значення цього лічильника за допомогою counter-increment. Наприклад, можна створити нумерацію пунктів списку:

let myList = document.getElementById('myList');
myList.style.counterReset = 'section'; // Встановлення лічильника
myList.style.counterIncrement = 'section 1'; // Збільшення значення лічильника на 1

Завдяки властивості element.style.counterIncrement, програмісти можуть створювати складні лічильники з різними правилами збільшення та зменшення значень, що може бути корисним у випадках, коли потрібно нумерувати елементи списку, створювати таблиці з номерами рядків або навіть робити лічильники для власних потреб у макеті сторінки.

Порада:	Комбінуйте `element.style.counterIncrement` з псевдоелементами (`::before`, `::after`) для створення креативних дизайнів з нумерацією або лічильниками, що можуть бути показані біля елементів. Це дозволяє нумерувати або позначати окремі елементи додатково до тексту.
Порада:	Експериментуйте з різними способами використання `element.style.counterIncrement`, наприклад, для створення залежної нумерації, де значення лічильника залежить від умов або подій на сторінці. Це може бути корисно при створенні складних форм або таблиць, де нумерація відбувається за певними правилами.
Порада:	Не забувайте реініціалізувати лічильник за допомогою `element.style.counterReset` за необхідності, щоб змінити його значення або розпочати лічильник з нового значення. Це дозволить контролювати нумерацію та лічильники відповідно до вашого дизайну.

Синтаксис

element.style.counterIncrement

Значення

Return

Переглядачі

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

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

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

Приклади

Цей приклад дозволяє користувачу ввести значення збільшення лічильника для елементів списку за допомогою форми та кнопки. Після застосування значення, номери елементів списку змінюються відповідно до введеного інкременту, наочно демонструючи роботу властивості element.style.counterIncrement.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/rNgggoM">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі кожен елемент списку отримує свій власний порядковий номер, залежно від позиції в списку. Це дозволяє створювати складні списки з підрахунками, що допомагає в кращому розумінні структури та ієрархії інформації.

let lists = document.querySelectorAll('.custom-list');
let counter = 1;

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

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

let headers = document.querySelectorAll('h1, h2, h3');
let counter = 1;

headers.forEach(header => {
  header.style.counterIncrement = 'section ' + counter;
  counter++;
});

JS довідник

JavaScript

Наповнення JS розділу