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

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

element.style.borderTopWidth – це властивість, яка дозволяє встановлювати або отримувати ширину верхнього кордону елемента у JavaScript. Вона приймає значення у вигляді рядка, що представляє ширину, наприклад, "2px", "0", або "thin".

Для встановлення ширини верхнього кордону елемента, використовуйте синтаксис element.style.borderTopWidth = 'значення'. Наприклад, щоб встановити ширину верхнього кордону в 5 пікселів, можна написати:

const element = document.getElementById('myElement');
element.style.borderTopWidth = '5px';

Цей код знайде елемент з id myElement і встановить ширину його верхнього кордону в 5 пікселів. Ви можете використовувати різні одиниці виміру, такі як пікселі (px), ем (em), відсотки (%) тощо.

Для отримання поточної ширини верхнього кордону використовуйте синтаксис element.style.borderTopWidth. Наприклад:

const element = document.getElementById('myElement');
const borderTopWidth = element.style.borderTopWidth;
console.log(borderTopWidth);

Цей код виведе поточну ширину верхнього кордону елемента myElement. Якщо ширина не була встановлена через CSS або JavaScript, то повернеться порожній рядок.

У разі, якщо ви хочете встановити ширину кордону умовно, можна використати конструкцію if:

const element = document.getElementById('myElement');
if (condition) {
  element.style.borderTopWidth = '10px';
} else {
  element.style.borderTopWidth = '3px';
}

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

Іноді потрібно змінювати ширину кордону динамічно, наприклад, при взаємодії користувача з елементом. У такому випадку можна встановити обробник подій:

const element = document.getElementById('myElement');
element.addEventListener('click', function() {
  element.style.borderTopWidth = '8px';
});

Цей код змінює ширину верхнього кордону елемента myElement до 8 пікселів при натисканні на нього.

Важливо пам'ятати, що значення властивості borderTopWidth має бути валідним CSS-значенням. Якщо ви спробуєте встановити некоректне значення, наприклад, element.style.borderTopWidth = 'invalid', браузер може проігнорувати це значення або встановити кордон в нульову ширину.

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

правити

Порада

Зміна borderTopWidth може бути корисною для створення анімацій. Використовуйте setInterval або requestAnimationFrame, щоб поступово змінювати ширину кордону, створюючи плавний ефект переходу:

const element = document.getElementById('myElement');
let width = 0;
const interval = setInterval(() => {
  if (width >= 10) clearInterval(interval);
  element.style.borderTopWidth = ${width++}px;
}, 100);

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

Порада

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

const element = document.getElementById('myElement');
const style = window.getComputedStyle(element);
const borderTopWidth = style.borderTopWidth;
console.log(borderTopWidth);

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

Порада

Комбінуйте borderTopWidth з іншими властивостями кордону для досягнення складних візуальних ефектів. Наприклад, можна змінювати колір та стиль кордону одночасно, щоб створити більш помітний ефект при взаємодії з користувачем:

const element = document.getElementById('myElement');
element.style.borderTopWidth = '4px';
element.style.borderTopColor = 'red';
element.style.borderTopStyle = 'dashed';

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

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

Синтаксис

element.style.borderTopWidth

Переглядачі

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

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

Переглядач
	1	1	3	8	12

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

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

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

Переглядач
	-	-

Приклади

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

<div class="tab">перший елемент tab</div>
<div class="tab">другий елемент tab</div>
<div class="tab-active">перший елемент tab-active</div>
<div class="tab-active">другий елемент tab-active</div>

document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', function() {
    const activeTab = document.querySelector('.tab-active');
    if (activeTab) {
      activeTab.classList.remove('tab-active');
      activeTab.style.borderTopWidth = '2px'; // Повторна установка стандартної ширини
    }
    this.classList.add('tab-active');
    this.style.borderTopWidth = '8px'; // Установка нової ширини для активної вкладки
  });
});

<div id="myElement">Прокручуй сторінку — верхня межа товщатиме</div>
<div style="height: 1200px"></div>

#myElement {
    position: sticky;
    top: 0;
    border-top: 0 solid #0172ad;
    background: #eef6ff;
    padding: 8px;
}

window.addEventListener('scroll', function () {
    const element = document.getElementById('myElement');
    const maxWidth = 20; // максимальна товщина межі
    const newWidth = Math.min(window.scrollY / 10, maxWidth);

    element.style.borderTopWidth = `${newWidth}px`;
});