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 є гнучкою властивістю для зміни ширини кордонів елемента, дозволяючи встановлювати як однакову ширину для всіх сторін, так і різну для кожної окремої сторони.
| Порада: | Використовуйте обчислення для встановлення значень властивості |
| Порада: | Ви можете використовувати динамічну зміну стилів на основі взаємодії користувача. Наприклад, ви можете змінювати ширину кордону в залежності від події, такої як |
| Порада: | Пам'ятайте про важливість одиниць вимірювання. Хоча пікселі є найпоширенішою одиницею для ширини кордону, ви також можете використовувати |
Синтаксис
element.style.borderWidthЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад дозволяє користувачам інтерактивно змінювати ширину кордону для кожної сторони елемента окремо, забезпечуючи гнучкість і наочність змін. Користувач може вводити значення у відповідні поля та застосовувати зміни натисканням кнопки "Застосувати".
Цей приклад демонструє, як динамічно змінювати ширину кордону елемента залежно від розміру вікна браузера. Це може бути корисним для створення адаптивного дизайну, який реагує на розмір екрана користувача. При зміні розміру вікна браузера, ширина верхнього кордону елемента буде автоматично збільшуватись або зменшуватись.
window.addEventListener('resize', function() {
let element = document.getElementById('responsiveElement');
let width = window.innerWidth / 50 + 'px';
element.style.borderWidth = width;
});Цей приклад показує, як змінювати ширину кордону елемента за допомогою введення користувача через форму. Це дозволяє користувачу інтерактивно змінювати стилі елемента, надаючи можливість експериментувати з різними значеннями та відразу бачити результат на екрані. При натисканні кнопки "Застосувати", нове значення ширини кордону буде застосоване до елемента.
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;
});