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) для створення креативних дизайнів з нумерацією або лічильниками, що можуть бути показані біля елементів. Це дозволяє нумерувати або позначати окремі елементи додатково до тексту.

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.style.counterIncrement

Переглядачі

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

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

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

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

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

Приклади

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

<header>
  <h2 class="title">element.style.counterIncrement</h2>
  <p class="description">Метод встановлює збільшення лічильника CSS для елементів</p>
</header>
<main>
  <div class="controls">
    <label for="counterIncrement">Значення збільшення лічильника (наприклад, 1 або 2): </label>
    <input type="number" id="counterIncrement" value="1">
    <button id="applyIncrement">Застосувати інкремент</button>
  </div>
  <br>
  <div class="result">
    <ul id="counterList">
      <li>Елемент списку 1</li>
      <li>Елемент списку 2</li>
      <li>Елемент списку 3</li>
      <li>Елемент списку 4</li>
      <li>Елемент списку 5</li>
    </ul>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

ul {
  counter-reset: list-counter;
}

li {
  list-style: none;
  counter-increment: list-counter;
  margin-bottom: 5px;
}

li::before {
  content: counter(list-counter) ". ";
  font-weight: bold;
}

document.getElementById('applyIncrement').addEventListener('click', function () {
  let incrementValue = document.getElementById('counterIncrement').value;
  let listItems = document.querySelectorAll('#counterList li');

  listItems.forEach(item => {
    item.style.counterIncrement = `list-counter ${incrementValue}`;
  });
});
//# sourceURL=pen.js

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

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

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

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++;
});