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

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

element.style.outlineOffset - це властивість JavaScript, яка дозволяє змінювати відстань між контуром елемента і його межами (border). Вона корисна для створення додаткового простору між контуром і елементом, що може підвищити візуальну привабливість і читабельність інтерфейсу.

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

Наприклад, припустимо, що у нас є елемент з ID myElement, до якого ми хочемо застосувати відступ контуру:

let element = document.getElementById('myElement');
element.style.outline = '2px solid red';
element.style.outlineOffset = '10px';

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

Властивість outlineOffset підтримує позитивні та негативні значення. Позитивні значення збільшують відстань між контуром і межами елемента, тоді як негативні значення зменшують цю відстань, що може навіть призвести до накладення контуру на сам елемент:

// Відступ контуру на 5 пікселів всередину
element.style.outlineOffset = '-5px';

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

Також варто зазначити, що outlineOffset працює з іншими властивостями стилю, такими як outlineColor, outlineStyle, і outlineWidth, що дозволяє створювати різноманітні ефекти контурів. Наприклад:

element.style.outline = '3px dashed blue';
element.style.outlineOffset = '15px';

Це створить контур синього кольору з пунктиром навколо елемента, відступлений на 15 пікселів.

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

Узагалі, element.style.outlineOffset надає простий, але ефективний спосіб маніпулювання відстанню контуру, допомагаючи створювати візуально привабливі і функціональні веб-дизайни.

правити

Порада

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

let input = document.querySelector('input');
input.addEventListener('focus', function() {
    input.style.outlineOffset = '8px';
});
input.addEventListener('blur', function() {
    input.style.outlineOffset = '0px';
});

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

Порада

Використовуйте outlineOffset разом з іншими властивостями стилю для створення складних декоративних рамок. Це дозволить вам експериментувати з дизайном і створювати більш оригінальні та привабливі інтерфейси. Наприклад:

let element = document.getElementById('decorativeBox');
element.style.outline = '3px dotted green';
element.style.outlineOffset = '5px';
element.style.border = '2px solid black';

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

Порада

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

#myElement {
    transition: outline-offset 0.3s ease;
}

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

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

Синтаксис

element.style.outlineOffset

Переглядачі

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

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

Переглядач
	1	1.5	1.2	9.5	15	—

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

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

Приклади

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

<div class="list-item">перший елемент list-item</div>
<div class="list-item">другий елемент list-item</div>

const items = document.querySelectorAll('.list-item');

items.forEach(item => {
    item.addEventListener('click', () => {
        items.forEach(i => {
            i.style.outline = 'none';
            i.style.outlineOffset = '0';
        });
        item.style.outline = '2px solid green';
        item.style.outlineOffset = '3px';
    });
});

<div class="hover-effect">перший елемент hover-effect</div>
<div class="hover-effect">другий елемент hover-effect</div>

const elements = document.querySelectorAll('.hover-effect');

elements.forEach(element => {
    element.addEventListener('mouseenter', () => {
        element.style.outline = '2px solid blue';
        element.style.outlineOffset = '5px';
    });

    element.addEventListener('mouseleave', () => {
        element.style.outline = 'none';
    });
});