JavaScript и border-width: изменение толщины рамки

Раздел: Веб-разработка -> Работа с размерами

Работа со свойством border-width в JavaScript

Основной способ - напрямую присвоить значение свойству borderWidth объекта style.

// Установка одинаковой ширины рамки для всех сторон
element.style.borderWidth = '3px';

размеры js (получение размеров элементов в js)

Этот метод прост и понятен. Достаточно указать строку с числом и единицей измерения. Браузер автоматически применит значение ко всем четырём сторонам. Если рамка не отображается, проверьте, задан ли borderStyle (например, 'solid').

Типичная ошибка:

Забыть указать единицу измерения или ключевое слово. borderWidth = '2' не сработает, браузер проигнорирует значение. Также часто забывают задать стиль границы - без него ширина не имеет видимого эффекта.

Как задать разную ширину границы для каждой стороны?

Для отдельных сторон применяются свойства:

  • borderTopWidth
  • borderRightWidth
  • borderBottomWidth
  • borderLeftWidth
element.style.borderTopWidth = '5px';
element.style.borderRightWidth = '10px';
element.style.borderBottomWidth = '2px';
element.style.borderLeftWidth = '8px';

Style border width js (стиль border-width в javascript)

Этот способ даёт полный контроль над каждым краем. Удобно при создании несимметричных рамок, например, для стилизации стрелок или индикаторов.

Возможные проблемы:

Если после установки отдельных сторон задать общее borderWidth, оно перезапишет все частные значения. Следить за порядком операций.

Как установить border-width вместе с другими свойствами без перезаписи всего элемента?

Используйте style.setProperty(property, value) для изменения одного свойства среди остальных:

element.style.setProperty('border-width', '4px');
element.style.setProperty('border-style', 'dashed');
element.style.setProperty('border-color', 'red');

Js width (ширина элемента в javascript)

Метод setProperty не влияет на другие уже установленные стили (в отличие от cssText). Подходит при точечной настройке.

Недостаток:

Нужно писать несколько вызовов. Для массового изменения проще использовать строку cssText.

Как изменить толщину границы, не трогая JS-стили напрямую?

Можно заранее определить CSS-классы с разной шириной рамки и переключать их через classList:

.border-thin { border-width: 1px; border-style: solid; }
.border-thick { border-width: 5px; border-style: solid; }
element.classList.add('border-thick');
element.classList.remove('border-thin');

Такой подход отделяет стилизацию от логики приложения. Классы можно комбинировать, а изменения поддерживать в одном месте (CSS-файле).

Ошибка:

Забыть указать border-style в классе. Без стиля рамка не появится, несмотря на заданную ширину.

Как получить текущую ширину границы, заданную через CSS?

Используйте getComputedStyle и читайте свойство borderTopWidth (всегда в пикселях):

const computed = window.getComputedStyle(element);
const topBorderPx = computed.borderTopWidth;  // например '2px'
const numericValue = parseFloat(topBorderPx); // 2

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

Нюанс:

Для получения ширины всех сторон придётся обращаться к каждому свойству отдельно. Сокращённое свойство borderWidth не поддерживается в getComputedStyle.

Как использовать стандартные ключевые слова (thin, medium, thick)?

Свойство borderWidth принимает ключевые слова, которые соответствуют определённой браузером толщине (обычно 1px, 3px, 5px):

element.style.borderWidth = 'thin';
element.style.borderWidth = 'medium';
element.style.borderWidth = 'thick';

Они дают некоторую независимость от конкретных пиксельных значений. Но точная толщина может различаться между браузерами.

Ограничение:

Нельзя задать разные ключевые слова для разных сторон (только одно для всех). Для асимметрии нужны числовые значения.

Как менять ширину границы через CSS-переменные, управляемые из JS?

Можно объявить кастомное свойство в CSS и менять его из JavaScript:

/* CSS */
.element {
  --border-thickness: 2px;
  border: var(--border-thickness) solid black;
}
// JavaScript
document.documentElement.style.setProperty('--border-thickness', '8px');

Или для конкретного элемента:

element.style.setProperty('--border-thickness', '6px');

Этот подход удобен при согласованных изменениях множества свойств (например, рамка и отступ) через одну переменную.

Проблема:

Браузеры не поддерживают CSS-переменные в старых версиях (IE11). Для кроссбраузерности нужен fallback.

Дополнительные расширенные примеры работы с border-width

Пример 
// Пример 1. Плавное изменение толщины рамки при наведении (CSS transition + JS)
/* CSS */
.box {
  border: 2px solid blue;
  transition: border-width 0.3s ease;
}
.box:hover {
  border-width: 8px;
}
При наведении рамка плавно расширяется с 2px до 8px. JS не требуется, если эффект статичен. Если нужно триггерить через JavaScript, можно добавить класс:
element.classList.add('hover-effect'); // где .hover-effect { border-width: 8px; }
Пример 
// Пример 2. Чтение и установка border-width для псевдоэлементов
const style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('.box::after { border-width: 4px; }', 0);
// Через CSSOM можно прочитать уже определённые стили псевдоэлемента:
const afterStyle = window.getComputedStyle(element, '::after');
const afterBorderWidth = afterStyle.borderTopWidth; // '4px'
Изменять стили псевдоэлементов напрямую из JS нельзя, только через CSSOM или добавление правил.
Пример 
// Пример 3. Установка border-width с использованием calc() и JS
// В CSS:
border-width: calc(2px + 4px); /* результат 6px */
// Но из JS нельзя динамически менять calc()? Можно через CSS custom property:
// CSS:
border-width: calc(2px + var(--extra, 0px));
// JS:
element.style.setProperty('--extra', '10px');
Таким образом можно комбинировать фиксированную базу с динамической надбавкой.
Пример 
// Пример 4. Обработка разных единиц измерения (em, rem, %)
element.style.borderWidth = '1.5em'; // зависит от размера шрифта элемента
const fontSize = parseFloat(getComputedStyle(element).fontSize); // 16px
const emValue = parseFloat(element.style.borderWidth) * fontSize; // 24px
Работа с относительными единицами требует учёта контекста. Для точного контроля часто используют px.
Пример 
// Пример 5. Функция для безопасной установки border-width с проверкой
function setBorderWidth(el, value) {
  if (typeof value === 'number' && value > 0) {
    el.style.borderWidth = value + 'px';
  } else if (typeof value === 'string' && /^\d+(\.\d+)?(px|em|rem|%)$/.test(value)) {
    el.style.borderWidth = value;
  } else {
    console.warn('Некорректное значение для border-width:', value);
  }
}
setBorderWidth(myElement, 3);
setBorderWidth(myElement, '2.5em');
Функция обрабатывает как числа (автоматически добавляя 'px'), так и строки с корректной единицей. Любые другие значения игнорируются с предупреждением.
Пример 
// Пример 6. Анимация изменения border-width через requestAnimationFrame
function animateBorderWidth(element, targetWidth, duration) {
  const start = performance.now();
  const initial = parseFloat(getComputedStyle(element).borderTopWidth);
  const change = targetWidth - initial;
  
  function update(time) {
    const elapsed = time - start;
    const progress = Math.min(elapsed / duration, 1);
    const currentWidth = initial + change * progress;
    element.style.borderWidth = currentWidth + 'px';
    if (progress < 1) {
      requestAnimationFrame(update);
    }
  }
  requestAnimationFrame(update);
}
animateBorderWidth(myDiv, 20, 1000); // от текущей толщины до 20px за 1 секунду
Плавное изменение вручную без CSS transitions. Полезно, когда нужно точное управление временем или отмена анимации.

Стиль border-width в JavaScript - comments

En
Style border width js (javascript)