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

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

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

Щоб використовувати element.style.borderBottomWidth, спочатку потрібно отримати доступ до елемента, до якого ви хочете застосувати цю властивість. Це можна зробити за допомогою методів, таких як getElementById, getElementsByClassName або querySelector. Після цього можна встановити бажану ширину нижньої рамки.

Розглянемо простий приклад. Припустимо, у вас є елемент з ідентифікатором myElement, і ви хочете встановити для нього ширину нижньої рамки в 5 пікселів:

// Знаходимо елемент за його ідентифікатором
let element = document.getElementById('myElement');

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

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

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

<div id="myElement">Ширина нижньої рамки</div>
<button id="changeWidthButton">Змінити ширину нижньої рамки</button>

<script>
  // Знаходимо елемент та кнопку за їх ідентифікаторами
  let element = document.getElementById('myElement');
  let button = document.getElementById('changeWidthButton');
  
  // Додаємо обробник події для кнопки
  button.addEventListener('click', function() {
    // Перевіряємо поточну ширину рамки і змінюємо її
    if (element.style.borderBottomWidth === '2px') {
      element.style.borderBottomWidth = '5px';
    } else if (element.style.borderBottomWidth === '5px') {
      element.style.borderBottomWidth = '10px';
    } else {
      element.style.borderBottomWidth = '2px';
    }
  });
</script>

У цьому прикладі ми створюємо кнопку, яка змінює ширину нижньої рамки елемента при натисканні. Початкова ширина рамки встановлена на 2 пікселі. При натисканні на кнопку ширина рамки змінюється на 5 пікселів, потім на 10 пікселів, а при повторному натисканні повертається до 2 пікселів. Це демонструє, як можна динамічно змінювати властивість borderBottomWidth за допомогою JavaScript, створюючи інтерактивні ефекти для користувачів.

Використання element.style.borderBottomWidth є простим, але ефективним способом покращити дизайн і функціональність ваших веб-сторінок. Ця властивість надає можливість тонко налаштовувати зовнішній вигляд елементів, роблячи їх більш інформативними та привабливими для користувачів.

Порада:

Комбінуйте borderBottomWidth з іншими властивостями рамки для досягнення складних ефектів. Ви можете використовувати цю властивість разом з borderBottomStyle та borderBottomColor для створення унікальних стилів. Наприклад, створіть широку червону крапкову рамку:

let element = document.getElementById('myElement');
element.style.borderBottomWidth = '4px';
element.style.borderBottomStyle = 'dotted';
element.style.borderBottomColor = 'red';

Це дозволяє створювати більш складні та привабливі дизайни.

Порада:

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

let element = document.getElementById('myElement');
element.addEventListener('click', function() {
    element.style.borderBottomWidth = element.style.borderBottomWidth === '2px' ? '5px' : '2px';
});

Це робить ваші елементи більш інтерактивними та привабливими для користувачів, додаючи динамічності вашому інтерфейсу.

Синтаксис

element.style.borderBottomWidth

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі ми створюємо дві кнопки, які змінюють ширину нижньої рамки елемента при натисканні. Початкова ширина рамки встановлена на 2 пікселі. При натисканні на кнопку "Збільшити ширину рамки" ширина рамки збільшується на 2 пікселі. При натисканні на кнопку "Зменшити ширину рамки" ширина рамки зменшується на 2 пікселі, якщо вона більше 2 пікселів. Це демонструє, як можна динамічно змінювати властивість borderBottomWidth за допомогою JavaScript, створюючи інтерактивні ефекти для користувачів.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/WNBZrPO">
  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>.

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

<div id="myElement">Ширина нижньої рамки</div>

<script>
  // Знаходимо елемент за його ідентифікатором
  let element = document.getElementById('myElement');
  
  // Встановлюємо ширину нижньої рамки
  element.style.borderBottomWidth = '5px';
  element.style.borderBottomStyle = 'solid';
  element.style.borderBottomColor = 'black';
</script>

У цьому прикладі ми створимо більш складний ефект, де ширина нижньої рамки елемента змінюється при натисканні на кнопку. Це демонструє, як можна використовувати властивість element.style.borderBottomWidth для створення інтерактивних ефектів.

<div id="myElement">Ширина нижньої рамки</div>
<button id="changeWidthButton">Змінити ширину нижньої рамки</button>

<script>
  // Знаходимо елемент та кнопку за їх ідентифікаторами
  let element = document.getElementById('myElement');
  let button = document.getElementById('changeWidthButton');
  
  // Додаємо обробник події для кнопки
  button.addEventListener('click', function() {
    // Перевіряємо поточну ширину рамки і змінюємо її
    if (element.style.borderBottomWidth === '2px') {
      element.style.borderBottomWidth = '5px';
    } else if (element.style.borderBottomWidth === '5px') {
      element.style.borderBottomWidth = '10px';
    } else {
      element.style.borderBottomWidth = '2px';
    }
  });
</script>

JS довідник

JavaScript

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