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 з анімаціями CSS для створення плавних переходів при зміні відстані контуру. Це покращить користувацький досвід, роблячи зміни стилю більш елегантними і привабливими. Наприклад, додайте наступний CSS:

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

Порада:

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

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

Порада:

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

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

Синтаксис

element.style.outlineOffset

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/XWLdYXm">
  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>.

Цей приклад демонструє, як створити ефект "відступаючої" рамки при наведенні миші на елемент. При наведенні миші, навколо елемента з'являється синя рамка з відступом у 5 пікселів, що може використовуватись для підвищення візуальної привабливості та інтерактивності веб-сторінки.

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

У цьому прикладі показано, як змінити відступ рамки для візуалізації вибраного елемента у списку. При натисканні на будь-який елемент списку, навколо нього з'являється зелена рамка з відступом у 3 пікселі, що дозволяє користувачам легко ідентифікувати поточний вибір у списку.

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

JS довідник

JavaScript

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

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

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

Синтаксис

Значення

Return

Переглядачі

Приклади