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

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

element.style.listStyle - це властивість, яка дозволяє налаштовувати зовнішній вигляд маркерів у списках HTML. Вона є скороченням для одночасного встановлення трьох інших властивостей: listStyleType, listStylePosition та listStyleImage. Ця властивість дозволяє контролювати форму маркерів (кружечки, квадрати тощо), їхнє розташування (всередині або зовні списку) та зображення, яке використовується як маркер.

Щоб використовувати element.style.listStyle в JavaScript, спочатку потрібно отримати доступ до потрібного елемента списку. Це можна зробити за допомогою методів document.getElementById, document.querySelector або document.getElementsByClassName. Після отримання елемента можна змінювати його стиль списку, встановлюючи значення для listStyle.

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

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

Цей код одночасно встановлює тип маркерів (square) і їхню позицію (inside).

Властивість listStyleType визначає вигляд маркерів. Вона може приймати значення disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha та інші. Наприклад, щоб змінити маркери на римські цифри, використовуйте:

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

Властивість listStylePosition визначає позицію маркерів відносно елементів списку. Вона може мати значення inside (всередині елемента списку) або outside (зовні елемента списку). Приклад коду для встановлення маркерів зовні:

list.style.listStylePosition = "outside";

Властивість listStyleImage дозволяє використовувати власне зображення як маркер. Для цього необхідно задати URL зображення. Наприклад:

list.style.listStyleImage = "url('path/to/your/image.png')";

Якщо потрібно одночасно налаштувати кілька параметрів стилю списку, можна використовувати скорочення через listStyle. Наприклад, щоб встановити маркери у вигляді дисків, розміщених зовні, з власним зображенням, код виглядатиме так:

list.style.listStyle = "disc outside url('path/to/your/image.png')";

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

правити

Порада

Щоб тимчасово приховати маркери списку, встановіть listStyleType в значення none. Це корисно, якщо потрібно показати список без маркерів, а потім повернути їх назад:

element.style.listStyleType = "none";

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

Порада

Використовуйте JavaScript для динамічної зміни стилів списків у відповідь на взаємодію користувача. Наприклад, ви можете змінювати стиль маркерів при натисканні на кнопку:

document.getElementById("changeStyleButton").addEventListener("click", function() {
  var list = document.getElementById("myList");
  list.style.listStyle = "disc outside";
});

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

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

Синтаксис

element.style.listStyle

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

const button = document.getElementById('changeStyleButton');
const ulElement = document.getElementById('myList');

button.addEventListener('click', function() {
    ulElement.style.listStyleType = 'circle';
    ulElement.style.listStylePosition = 'inside';
    ulElement.style.listStyleImage = 'url("path/to/newImage.png")';
});

<ul id="responsiveList">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

const ulElement = document.getElementById('responsiveList');

window.addEventListener('resize', function() {
    if (window.innerWidth < 600) {
        ulElement.style.listStyle = 'square inside';
    } else {
        ulElement.style.listStyle = 'disc outside';
    }
});