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

Синтаксис

element.style.border

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

// Отримуємо елемент за його 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';
});