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

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

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

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

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

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

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

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

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

<div id="myElement">Стиль нижньої рамки</div>
<button id="changeStyleButton">Змінити стиль нижньої рамки</button>

<script>
  // Знаходимо елемент та кнопку за їх ідентифікаторами
  let element = document.getElementById('myElement');
  let button = document.getElementById('changeStyleButton');
  
  // Додаємо обробник події для кнопки
  button.addEventListener('click', function() {
    // Перевіряємо поточний стиль рамки і змінюємо його
    if (element.style.borderBottomStyle === 'solid') {
      element.style.borderBottomStyle = 'dashed';
    } else if (element.style.borderBottomStyle === 'dashed') {
      element.style.borderBottomStyle = 'dotted';
    } else {
      element.style.borderBottomStyle = 'solid';
    }
  });
</script>

У цьому прикладі ми створюємо кнопку, яка змінює стиль нижньої рамки елемента при натисканні. Початковий стиль рамки встановлений на суцільний (solid). При натисканні на кнопку стиль рамки змінюється на пунктирний (dashed), потім на крапковий (dotted), а при повторному натисканні повертається до суцільного. Це демонструє, як можна динамічно змінювати властивість borderBottomStyle за допомогою JavaScript, створюючи інтерактивні ефекти для користувачів.

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

Синтаксис

element.style.borderBottomStyle

Значення

Return

Переглядачі

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

Приклади

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

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

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

<div id="myElement">Стиль нижньої рамки</div>
<button id="changeStyleButton">Змінити стиль нижньої рамки</button>

<script>
  // Знаходимо елемент та кнопку за їх ідентифікаторами
  let element = document.getElementById('myElement');
  let button = document.getElementById('changeStyleButton');
  
  // Додаємо обробник події для кнопки
  button.addEventListener('click', function() {
    // Перевіряємо поточний стиль рамки і змінюємо його
    if (element.style.borderBottomStyle === 'solid') {
      element.style.borderBottomStyle = 'dashed';
    } else if (element.style.borderBottomStyle === 'dashed') {
      element.style.borderBottomStyle = 'dotted';
    } else {
      element.style.borderBottomStyle = 'solid';
    }
  });
</script>