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

Порада:

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

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

Синтаксис

element.style.listStyle

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/WNqbOda">
  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 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")';
});

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

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

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

JS довідник

JavaScript

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