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

правити

Порада

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

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

Порада

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

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

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

Порада

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

const button = document.getElementById('changeBorderButton');
button.addEventListener('click', function() {
  const element = document.getElementById('myElement');
  element.style.borderBottom = '4px dotted green';
});

Це дозволить вам динамічно змінювати стиль елементів у відповідь на дії користувача.

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

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

Синтаксис

element.style.borderBottom

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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