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

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

element.style.listStyleType - це властивість JavaScript, яка дозволяє змінювати вигляд маркерів у списках HTML. Вона визначає форму маркерів, які використовуються для елементів списку, і підтримує різні типи, включаючи стандартні круги, квадрати, числа, літери та інші символи.

Щоб використовувати element.style.listStyleType, спочатку необхідно отримати доступ до елемента списку в HTML-документі. Це можна зробити за допомогою методів document.getElementById, document.querySelector або інших методів вибору елементів. Після цього можна встановити значення властивості listStyleType відповідно до потрібного стилю маркерів.

Наприклад, щоб встановити маркери у вигляді квадратів, можна використати наступний код:

var list = document.getElementById("myList");
list.style.listStyleType = "square";

Цей код змінює стандартні круглі маркери на квадратні.

Властивість listStyleType підтримує різноманітні значення, включаючи:

disc (стандартний заповнений круг),
circle (незаповнений круг),
square (заповнений квадрат),
decimal (числа),
lower-roman (римські цифри в нижньому регістрі),
upper-roman (римські цифри у верхньому регістрі),
lower-alpha (латинські літери в нижньому регістрі),
upper-alpha (латинські літери у верхньому регістрі).

Для зміни маркерів на римські цифри, можна використати наступний код:

list.style.listStyleType = "upper-roman";

Цей код змінює маркери на римські цифри у верхньому регістрі.

Використання різних значень listStyleType дозволяє створювати унікальні та привабливі списки, які відповідають дизайну вашого веб-сайту або веб-додатку. Наприклад, для створення нумерованого списку з латинськими літерами у нижньому регістрі, можна використати наступний код:

list.style.listStyleType = "lower-alpha";

Це забезпечить відображення маркерів як a, b, c тощо.

Динамічна зміна listStyleType через JavaScript може бути корисною для інтерактивних веб-додатків, де потрібно змінювати вигляд списків у відповідь на дії користувача. Наприклад, можна змінювати тип маркерів при натисканні кнопки:

document.getElementById("changeTypeButton").addEventListener("click", function() {
  var list = document.getElementById("myList");
  list.style.listStyleType = (list.style.listStyleType === "disc") ? "square" : "disc";
});

Цей код перемикає тип маркерів між кругами і квадратами при кожному натисканні кнопки.

Властивість listStyleType також може бути використана у поєднанні з іншими властивостями стилю списків, такими як listStylePosition та listStyleImage, для створення більш складних і гнучких стилів. Наприклад, можна змінити тип маркерів і їхнє розташування одночасно:

list.style.listStyle = "circle inside";

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

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

Порада:

Поєднуйте listStyleType з псевдокласами CSS, щоб створювати стилі для специфічних станів елементів списку. Наприклад, змінюйте тип маркера для активного або вибраного пункту списку:

li.active {
  list-style-type: none;
  font-weight: bold;
}

А в JavaScript можна додавати або прибирати клас:

var listItems = document.querySelectorAll("li");
listItems.forEach(function(item) {
  item.addEventListener("click", function() {
    listItems.forEach(function(li) { li.classList.remove("active"); });
    item.classList.add("active");
  });
});

Це допоможе створити інтерактивні та динамічні списки, де користувачі чітко бачитимуть свої дії.

Порада:

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

var mainList = document.getElementById("mainList");
var nestedList = document.querySelector("#mainList ul");
mainList.style.listStyleType = "circle";
nestedList.style.listStyleType = "square";

Порада:

Комбінуйте listStyleType з CSS-класами для легшого керування стилями списків на всій сторінці. Наприклад, ви можете створити клас для квадратних маркерів і застосовувати його до потрібних списків:

document.getElementById("myList").classList.add("square-markers");

А в CSS:

.square-markers {
  list-style-type: square;
}

Синтаксис

element.style.listStyleType

Значення

Return

Переглядачі

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

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

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

Приклади

Цей приклад дозволяє користувачу змінювати тип маркерів у списку за допомогою випадаючого списку та кнопки. Користувач може вибрати тип маркера зі списку (наприклад, disc, circle, square, decimal, lower-roman, upper-roman), а потім натиснути кнопку "Застосувати тип маркера", щоб побачити зміни в реальному часі. Це забезпечує інтерактивний спосіб дослідження різних типів маркерів і їхнього впливу на вигляд списку.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/WNqbOgL">
  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>.

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

const listElement = document.getElementById('typeList');
const selectType = document.getElementById('selectType');

selectType.addEventListener('change', function() {
    const selectedType = selectType.value;
    listElement.style.listStyleType = selectedType;
});

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

const button = document.getElementById('changeTypeButton');
const listElement = document.getElementById('dynamicTypeList');

button.addEventListener('click', function() {
    const currentType = listElement.style.listStyleType;
    const newType = currentType === 'disc' ? 'square' : 'disc';
    listElement.style.listStyleType = newType;
});

JS довідник

JavaScript

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

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

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

Синтаксис

Значення

Return

Переглядачі

Приклади