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

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

element.style.border - це властивість, яка дозволяє змінювати або встановлювати стиль рамки навколо HTML-елемента. Вона є частиною об'єкта style, що надає можливість змінювати CSS-стилі елементів безпосередньо через JavaScript. Основна корисність цієї властивості полягає в тому, що вона дозволяє динамічно змінювати вигляд елементів на вебсторінці в залежності від різних умов або подій, що робить її незамінною для створення інтерактивних веб-додатків.

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

Найпростіший приклад використання element.style.border виглядає так:

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

// Встановлюємо рамку
element.style.border = '2px solid black';

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

Властивість border дозволяє встановлювати різні параметри рамки: товщину, стиль та колір. Ось кілька прикладів різних стилів рамок:

// Товщина рамки
element.style.border = '5px';

// Стиль рамки
element.style.border = 'dotted';
element.style.border = 'dashed';
element.style.border = 'solid';
element.style.border = 'double';
element.style.border = 'groove';
element.style.border = 'ridge';
element.style.border = 'inset';
element.style.border = 'outset';

// Колір рамки
element.style.border = 'red';
element.style.border = 'rgb(255, 0, 0)';
element.style.border = '#ff0000';

// Комбінування параметрів
element.style.border = '3px dashed blue';

Також можна встановлювати різні значення для кожної сторони рамки окремо за допомогою властивостей borderTop, borderRight, borderBottom та borderLeft:

// Встановлюємо різні рамки для кожної сторони
element.style.borderTop = '5px solid red';
element.style.borderRight = '3px dashed green';
element.style.borderBottom = '4px dotted blue';
element.style.borderLeft = '2px double yellow';

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

Окрім цього, можна використовувати скорочені властивості для встановлення окремих параметрів рамки. Наприклад, borderWidth, borderStyle та borderColor:

// Встановлюємо ширину рамки
element.style.borderWidth = '4px';

// Встановлюємо стиль рамки
element.style.borderStyle = 'dotted';

// Встановлюємо колір рамки
element.style.borderColor = 'purple';

Ці властивості можуть бути використані окремо або в комбінації з властивістю border для створення складніших стилів.

Ще один приклад використання element.style.border - це зміна рамки при певних подіях. Наприклад, зміна рамки при наведенні миші на елемент:

// Отримуємо елемент
const element = document.getElementById('myElement');

// Додаємо обробник події наведення миші
element.addEventListener('mouseover', function() {
  element.style.border = '3px solid red';
});

// Додаємо обробник події відведення миші
element.addEventListener('mouseout', function() {
  element.style.border = 'none';
});

У цьому прикладі рамка елемента змінюється на червону товщиною 3 пікселі при наведенні миші та зникає при відведенні миші.

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

правити

Порада

Перш за все, завжди пам'ятайте про специфіку CSS-параметрів, які ви встановлюєте через element.style.border. Наприклад, якщо ви хочете встановити рамку тільки для однієї сторони елемента, використовуйте відповідні властивості borderTop, borderRight, borderBottom або borderLeft. Це допоможе уникнути непотрібних змін стилю інших сторін рамки. Наприклад, щоб встановити рамку тільки для верхньої частини елемента, використовуйте element.style.borderTop = '3px solid red';.

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

Порада

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

const borderStyle = '2px dashed blue';
element1.style.border = borderStyle;
element2.style.border = borderStyle;

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

Порада

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

const element = document.getElementById('myElement');
if (element) {
  element.style.border = '1px solid black';
}

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

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

Синтаксис

element.style.border

Переглядачі

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

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

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

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

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

Приклади

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

<div id="simpleExample">Демонстраційний елемент</div>

// Отримуємо елемент за його ID
const element = document.getElementById('simpleExample');

// Встановлюємо рамку товщиною 2 пікселі, суцільну, чорного кольору
element.style.border = '2px solid black';

<div id="interactiveExample">Демонстраційний елемент</div>

// Отримуємо елемент за його ID
const element = document.getElementById('interactiveExample');

// Встановлюємо початковий стиль рамки
element.style.border = '2px solid blue';

// Додаємо обробник події наведення миші
element.addEventListener('mouseover', function() {
  // Змінюємо стиль рамки при наведенні миші
  element.style.border = '4px dashed red';
});

// Додаємо обробник події відведення миші
element.addEventListener('mouseout', function() {
  // Повертаємо початковий стиль рамки при відведенні миші
  element.style.border = '2px solid blue';
});