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

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

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

Порада

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

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

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

Порада

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

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

А в CSS:

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

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

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

Синтаксис

element.style.listStyleType

Переглядачі

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

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

Переглядач
	1	1	1	3.5	12	4

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

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

Приклади

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

<button id="changeTypeButton">Змінити</button>
<ul id="dynamicTypeList">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

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

<ul id="typeList">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>
<input type="text" id="selectType" value="текст для прикладу" placeholder="Введи щось">

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

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