style.borderWidth — товщина рамки елемента з JavaScript

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

element.style.borderWidth дозволяє змінювати або отримувати ширину всіх чотирьох сторін кордону елемента. Ця властивість є частиною об'єкта CSSStyleDeclaration і дозволяє маніпулювати стилями елемента безпосередньо за допомогою JavaScript.

Щоб встановити ширину кордону для елемента, вам потрібно звернутися до властивості style цього елемента і задати значення borderWidth. Значення може бути вказане в будь-яких допустимих одиницях вимірювання CSS, таких як пікселі (px), ем (em), відсотки (%) тощо.

// Приклад: встановлення однакової ширини для всіх сторін кордону
let element = document.getElementById('myElement');
element.style.borderWidth = '5px';

Цей код встановить ширину кордону елемента myElement на 5 пікселів для всіх чотирьох сторін – верхньої, правої, нижньої та лівої.

Властивість borderWidth також дозволяє встановити різну ширину для кожної сторони кордону, використовуючи чотири значення в одному рядку. Це значення вказуються в порядку: верхня, права, нижня і ліва сторони.

// Приклад: встановлення різної ширини для кожної сторони кордону
element.style.borderWidth = '1px 2px 3px 4px';

У цьому прикладі верхній кордон буде мати ширину 1 піксель, правий – 2 пікселі, нижній – 3 пікселі, і лівий – 4 пікселі.

Якщо вказати два значення, то перше значення буде застосовуватись до верхнього та нижнього кордонів, а друге – до правого та лівого:

// Приклад: встановлення ширини кордону для пар сторін
element.style.borderWidth = '2px 4px';

Тут верхній та нижній кордони будуть мати ширину 2 пікселі, а правий та лівий – 4 пікселі.

Якщо задати три значення, то перше буде застосовуватись до верхнього кордону, друге – до правого та лівого, а третє – до нижнього:

// Приклад: встановлення ширини кордону для трьох сторін
element.style.borderWidth = '2px 4px 6px';

У цьому випадку верхній кордон буде мати ширину 2 пікселі, правий та лівий – 4 пікселі, а нижній – 6 пікселів.

Для отримання поточної ширини кордону елемента використовуйте:

// Приклад: отримання поточної ширини кордону
let borderWidth = element.style.borderWidth;
console.log(borderWidth);

Це поверне рядок з поточними значеннями ширини кордону для елемента, які були задані раніше.

Таким чином, element.style.borderWidth є гнучкою властивістю для зміни ширини кордонів елемента, дозволяючи встановлювати як однакову ширину для всіх сторін, так і різну для кожної окремої сторони.

правити

Порада

Пам'ятайте про важливість одиниць вимірювання. Хоча пікселі є найпоширенішою одиницею для ширини кордону, ви також можете використовувати em, rem, відсотки та інші одиниці. Використання відносних одиниць може бути корисним для створення адаптивного дизайну:

element.style.borderWidth = '0.5em';

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

Порада

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

let width = window.innerWidth / 100 + 'px';
element.style.borderWidth = width;

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

Порада

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

element.addEventListener('mouseover', function() {
  this.style.borderWidth = '10px';
});
element.addEventListener('mouseout', function() {
  this.style.borderWidth = '2px';
});

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

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

Синтаксис

element.style.borderWidth

Переглядачі

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

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

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

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

Переглядач
	2	18	4	3

Приклади

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

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

window.addEventListener('resize', function() {
  let element = document.getElementById('responsiveElement');
  let width = window.innerWidth / 50 + 'px';
  element.style.borderWidth = width;
});

<header>
  <h2 class="title">element.style.borderWidth</h2>
  <p class="description">Дозволяє змінювати ширину всіх чотирьох сторін кордону елемента.</p>
</header>
<main>
  <div class="result">
    <!-- Елемент, на якому будемо змінювати ширину кордону -->
    <div id="demoElement" class="demo-box">Кордон цього елемента змінюється!</div>
    
    <!-- Форма для введення значень ширини кордону -->
    <form id="borderForm">
      <label for="borderTopWidth">Верхній кордон (px):</label>
      <input type="number" id="borderTopWidth" name="borderTopWidth" min="0" value="1">
      
      <br><label for="borderRightWidth">Правий кордон (px):</label>
      <input type="number" id="borderRightWidth" name="borderRightWidth" min="0" value="1">
      
      <br><label for="borderBottomWidth">Нижній кордон (px):</label>
      <input type="number" id="borderBottomWidth" name="borderBottomWidth" min="0" value="1">
      
      <br><label for="borderLeftWidth">Лівий кордон (px):</label>
      <input type="number" id="borderLeftWidth" name="borderLeftWidth" min="0" value="1">
      
      <button type="submit">Застосувати</button>
    </form>
  </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);
}

/* Стилі для демонстраційного елемента */
.demo-box {
  border: solid black;
  border-width: 1px;
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

document.getElementById('borderForm').addEventListener('submit', function (event) {
  event.preventDefault(); // Відміна стандартної дії відправки форми

  let borderTopWidth = document.getElementById('borderTopWidth').value + 'px';
  let borderRightWidth = document.getElementById('borderRightWidth').value + 'px';
  let borderBottomWidth = document.getElementById('borderBottomWidth').value + 'px';
  let borderLeftWidth = document.getElementById('borderLeftWidth').value + 'px';

  let demoElement = document.getElementById('demoElement'); // Отримання елемента для зміни стилю

  // Застосування нових значень ширини кордону
  demoElement.style.borderTopWidth = borderTopWidth;
  demoElement.style.borderRightWidth = borderRightWidth;
  demoElement.style.borderBottomWidth = borderBottomWidth;
  demoElement.style.borderLeftWidth = borderLeftWidth;
});
//# sourceURL=pen.js

<form id="borderForm">
    <label>Ім'я: <input type="text" name="name" value="Лесь"></label>
    <button type="submit">Надіслати</button>
</form>
<input type="number" id="borderWidth" value="10">
<div id="interactiveElement">Демонстраційний елемент</div>

document.getElementById('borderForm').addEventListener('submit', function(event) {
  event.preventDefault();
  let borderWidth = document.getElementById('borderWidth').value + 'px';
  let element = document.getElementById('interactiveElement');
  element.style.borderWidth = borderWidth;
});