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-класах чи стилях. Це дозволяє створювати більш інтерактивний і адаптивний інтерфейс користувача, що реагує на дії та події.

Порада:

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

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

Порада:

Зміна 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);

Порада:

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

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

Синтаксис

element.style.borderTopWidth

Значення

Return

Переглядачі

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

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

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

Приклади

Цей приклад дозволяє користувачам змінювати ширину верхнього кордону елемента шляхом введення значення в полі вводу. Після натискання кнопки "Застосувати" нове значення ширини кордону буде застосоване до елемента, що дозволяє бачити зміни в реальному часі.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/XWwZGxL">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

window.addEventListener('scroll', function() {
  const element = document.getElementById('myElement');
  const scrollPosition = window.scrollY;
  const maxWidth = 20; // Максимальна ширина кордону
  const newWidth = Math.min(scrollPosition / 10, maxWidth); // Обчислення нової ширини
  element.style.borderTopWidth = ${newWidth}px;
});

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

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'; // Установка нової ширини для активної вкладки
  });
});

JS довідник

JavaScript

Наповнення JS розділу

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

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

Синтаксис

Значення

Return

Переглядачі

Приклади