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

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

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

Щоб використовувати властивість borderRight, спочатку потрібно отримати доступ до потрібного HTML-елемента на веб-сторінці. Це можна зробити за допомогою різних методів, таких як document.getElementById, document.querySelector та інших.

Приклад:

let element = document.getElementById('myElement');
element.style.borderRight = '2px solid red';

У цьому прикладі ми спочатку знаходимо елемент з ідентифікатором myElement, а потім задаємо праву рамку з шириною 2 пікселі, суцільною лінією та червоним кольором.

Властивість borderRight є скороченням для трьох окремих властивостей: border-right-width, border-right-style та border-right-color. Ці властивості можна задавати окремо, якщо потрібно більш детально налаштувати параметри рамки.

Приклад:

element.style.borderRightWidth = '4px';
element.style.borderRightStyle = 'dashed';
element.style.borderRightColor = 'blue';

У цьому прикладі ми змінюємо ширину правої рамки на 4 пікселі, стиль рамки на пунктирну лінію (dashed) та колір на синій.

Варто зауважити, що значення для borderRight має бути передано у вигляді рядка, де кожен параметр (ширина, стиль, колір) відокремлений пробілом. Послідовність параметрів є важливою: спочатку задається ширина, потім стиль, і останнім кольором.

Також можна використовувати властивість borderRight для динамічної зміни стилю елемента у відповідь на певні події, наприклад, при наведенні курсора на елемент або при кліку на нього.

Приклад:

element.onmouseover = function() {
    element.style.borderRight = '3px dotted green';
};
element.onmouseout = function() {
    element.style.borderRight = '1px solid black';
};

У цьому прикладі, коли користувач наводить курсор на елемент, права рамка змінюється на 3 пікселі, крапковий стиль та зелений колір. Коли курсор залишає елемент, рамка повертається до попереднього стилю з шириною 1 піксель, суцільною лінією та чорним кольором.

Таким чином, element.style.borderRight є потужним інструментом для керування стилем правої рамки HTML-елементів. Завдяки цій властивості розробники можуть створювати більш інтерактивні й візуально привабливі веб-сторінки.

правити

Порада

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

if (window.innerWidth < 600) {
    element.style.borderRight = '2px solid blue';
} else {
    element.style.borderRight = '4px solid green';
}

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

Порада

Пам'ятайте, що ви можете використовувати JavaScript для анімації змін рамок, створюючи більш інтерактивні та привабливі інтерфейси. Використовуйте метод setInterval або requestAnimationFrame для поступового зміни ширини або кольору рамки. Наприклад, для поступового збільшення ширини рамки:

let width = 0;
let interval = setInterval(function() {
    width += 1;
    element.style.borderRightWidth = width + 'px';
    if (width === 10) clearInterval(interval);
}, 100);

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

Порада

Розгляньте можливість використання змінних CSS (custom properties) для динамічного налаштування стилів через JavaScript. Це дозволяє легко змінювати кілька властивостей одночасно і зберігати узгодженість стилів. Спочатку задайте змінні у CSS:

:root {
    --border-right-width: 2px;
    --border-right-color: red;
}

Потім змінюйте їх через JavaScript:

document.documentElement.style.setProperty('--border-right-width', '4px');
document.documentElement.style.setProperty('--border-right-color', 'blue');
element.style.borderRight = 'var(--border-right-width) solid var(--border-right-color)';

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

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

Синтаксис

element.style.borderRight

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div id="myElement" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

let element = document.getElementById('myElement');
document.addEventListener('scroll', function() {
    if (window.scrollY > 100) {
        element.style.borderRight = '5px solid green';
    } else {
        element.style.borderRight = '2px dashed red';
    }
});

<div id="myElement">Демонстраційний елемент</div>

let element = document.getElementById('myElement');
document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        element.style.borderRight = '8px double blue';
    }
});
document.addEventListener('keyup', function(event) {
    if (event.key === 'Enter') {
        element.style.borderRight = '1px solid black';
    }
});