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

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

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

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

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

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

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

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

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

// Товщина нижньої рамки
element.style.borderBottom = '5px';

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

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

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

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

Крім того, можна використовувати скорочені властивості для встановлення окремих параметрів нижньої рамки, такі як borderBottomWidth, borderBottomStyle та borderBottomColor:

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

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

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

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

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

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

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

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

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

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

Синтаксис

element.style.borderBottom

Значення

Return

Переглядачі

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

Приклади

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

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

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

<div id="complexExample">Зразок тексту</div>
<button id="changeBorderBtn">Змінити нижню рамку</button>

<style>
#complexExample {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f0f0f0;
}
</style>

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

// Отримуємо кнопку за її ID
const button = document.getElementById('changeBorderBtn');

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

// Додаємо обробник події натискання на кнопку
button.addEventListener('click', function() {
  // Змінюємо стиль нижньої рамки при натисканні на кнопку
  element.style.borderBottom = '4px dashed red';
});
</script>