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

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

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;
});

<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;
});