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

Порада:

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

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

Синтаксис

element.style.outlineColor

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/rNEeKOa">
  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 inputFields = document.querySelectorAll('input');
inputFields.forEach(field => {
    field.addEventListener('blur', () => {
        if (field.value === '') {
            field.style.outlineColor = 'red';
        } else {
            field.style.outlineColor = 'green';
        }
    });
});

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

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

JS довідник

JavaScript

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