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

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

element.style.outlineColor - це властивість JavaScript, яка дозволяє змінювати колір контурів (outline) HTML-елемента. Контур - це лінія, яка намальована навколо елемента, поза межами кордону (border), для виділення елемента.

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

Ось приклад того, як це можна зробити:

// Отримати доступ до елемента за ID
let element = document.getElementById('myElement');

// Змінити колір контуру на червоний
element.style.outlineColor = 'red';

У цьому прикладі ми використовуємо метод getElementById для отримання доступу до елемента з ID myElement. Потім ми змінюємо колір його контуру на червоний, використовуючи element.style.outlineColor.

Також можна використовувати інші кольори, визначені як у текстовому форматі ('blue', 'green'), так і у форматі HEX ('#ff0000'), RGB ('rgb(255,0,0)') або HSL ('hsl(0, 100%, 50%)'). Наприклад:

// Отримати доступ до елемента за класом
let element = document.querySelector('.myElement');

// Змінити колір контуру на зелений
element.style.outlineColor = '#00ff00';

У цьому прикладі ми використовуємо метод querySelector для вибору першого елемента з класом myElement. Потім ми змінюємо колір його контуру на зелений, використовуючи формат HEX.

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

let element = document.getElementById('myElement');

// Змінити колір контуру при наведенні
element.addEventListener('mouseover', function() {
    element.style.outlineColor = 'blue';
});

// Повернути початковий колір при виході миші
element.addEventListener('mouseout', function() {
    element.style.outlineColor = 'initial';
});

У цьому прикладі ми додаємо два обробники подій: один для зміни кольору контуру на синій при наведенні миші на елемент, і другий - для повернення початкового кольору при виході миші з елемента.

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

правити

Порада

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

let element = document.querySelector('.fancy-element');
element.style.outlineColor = 'orange';
element.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';
element.style.backgroundColor = 'lightyellow';

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

Порада

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

let element = document.querySelector('.interactive-element');
element.addEventListener('focus', function() {
    element.style.outlineColor = 'green';
});
element.addEventListener('blur', function() {
    element.style.outlineColor = 'initial';
});

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

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

Синтаксис

element.style.outlineColor

Переглядачі

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

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

Переглядач
	1	1.5	1.2	7	12	8

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

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

Приклади

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

<input type="text" value="текст для прикладу">

const inputFields = document.querySelectorAll('input');
inputFields.forEach(field => {
    field.addEventListener('blur', () => {
        if (field.value === '') {
            field.style.outlineColor = 'red';
        } else {
            field.style.outlineColor = 'green';
        }
    });
});

<button>Натисни</button>
<div class="my-element">перший елемент my-element</div>
<div class="my-element">другий елемент my-element</div>

const button = document.querySelector('button');
const element = document.querySelector('.my-element');

button.addEventListener('click', () => {
    const currentColor = element.style.outlineColor;
    element.style.outlineColor = currentColor === 'blue' ? 'orange' : 'blue';
});