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';

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

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

Порада

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

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

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

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

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

Синтаксис

element.style.borderBottomWidth

Переглядачі

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

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

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

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

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

Приклади

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

<header>
  <h2 class="title">element.style.borderBottomWidth</h2>
  <p class="description">Встановлює або змінює ширину нижньої рамки HTML-елемента.</p>
</header>
<main>
  <div class="result">
    <button id="increaseWidthButton">Збільшити ширину рамки</button>
    <button id="decreaseWidthButton">Зменшити ширину рамки</button>
    <div id="box" class="box">Ширина нижньої рамки</div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.box {
  width: 200px;
  height: 100px;
  margin-top: 20px;
  text-align: center;
  line-height: 100px;
  background-color: lightblue;
  border-bottom: 2px solid black; /* Початкова рамка */
}

document.getElementById('increaseWidthButton').addEventListener('click', function () {
  let box = document.getElementById('box');
  let currentWidth = parseInt(window.getComputedStyle(box).borderBottomWidth);
  box.style.borderBottomWidth = currentWidth + 2 + 'px';
});

document.getElementById('decreaseWidthButton').addEventListener('click', function () {
  let box = document.getElementById('box');
  let currentWidth = parseInt(window.getComputedStyle(box).borderBottomWidth);
  if (currentWidth > 2) {
    box.style.borderBottomWidth = currentWidth - 2 + 'px';
  }
});
//# sourceURL=pen.js

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

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

<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>