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

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

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

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

Наприклад, якщо у вас є елемент списку з id myList, ви можете встановити зображення як маркер наступним чином:

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

Цей код змінює стандартні маркери на зображення, яке знаходиться за вказаною URL-адресою.

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

Якщо потрібно повернутися до стандартних маркерів списку, можна встановити значення властивості listStyleImage в none. Це прибере зображення-маркер і поверне стандартні маркери списку. Наприклад:

list.style.listStyleImage = "none";

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

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

document.getElementById("changeMarkerButton").addEventListener("click", function() {
  list.style.listStyleImage = "url('path/to/another/image.png')";
});

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

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

Використання element.style.listStyleImage дозволяє створювати унікальні стилі списків, покращуючи загальне враження від веб-сторінки та роблячи її більш привабливою для користувачів.

правити

Порада

Щоб забезпечити правильне відображення зображень-маркерів на мобільних пристроях, використовуйте відносні одиниці виміру (наприклад, em або %) для розміру зображень. Це допоможе вашим маркерам адаптуватися до різних розмірів екрану. Наприклад, створіть зображення розміром 1em, яке буде змінюватися залежно від розміру шрифту.

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

Порада

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

document.getElementById("myList").classList.add("custom-marker");

А в CSS:

.custom-marker {
  list-style-image: url('path/to/your/image.png');
}

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

Порада

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

@keyframes example {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animated-marker {
  list-style-image: url('path/to/animated/image.gif');
  animation: example 2s infinite;
}

А в JavaScript:

document.getElementById("myList").classList.add("animated-marker");

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

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

Синтаксис

element.style.listStyleImage

Переглядачі

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

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

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

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

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

Приклади

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

<ul id="customList">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>
<img id="selectImage" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">

const listElement = document.getElementById('customList');
const selectImage = document.getElementById('selectImage');

selectImage.addEventListener('change', function() {
    const imageUrl = selectImage.value;
    listElement.style.listStyleImage = `url(${imageUrl})`;
});

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

const listElement = document.getElementById('hoverList');

listElement.addEventListener('mouseover', function() {
    listElement.style.listStyleImage = 'url("path/to/hoverImage.png")';
});

listElement.addEventListener('mouseout', function() {
    listElement.style.listStyleImage = 'none';
});