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

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

element.style.borderTopLeftRadius використовується для встановлення або зміни радіуса закруглення верхнього лівого кута елемента.

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

Встановлювати значення borderTopLeftRadius можна наступним чином:

let element = document.getElementById('myElement');
element.style.borderTopLeftRadius = '10px';

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

element.style.borderTopLeftRadius = '50%';

Щоб зчитати поточне значення borderTopLeftRadius, просто зверніться до цієї властивості:

let currentRadius = element.style.borderTopLeftRadius;
console.log(currentRadius); // Виведе значення радіуса або порожній рядок, якщо радіус не встановлено

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

element.addEventListener('mouseover', function() {
    element.style.borderTopLeftRadius = '20px';
});
element.addEventListener('mouseout', function() {
    element.style.borderTopLeftRadius = '0';
});

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

Інший приклад - зміна радіуса закруглення на основі значення форми:

let input = document.getElementById('radiusInput');
input.addEventListener('change', function() {
    element.style.borderTopLeftRadius = input.value + 'px';
});

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

Також можна використовувати borderTopLeftRadius для створення адаптивних інтерфейсів, які змінюються у залежності від розміру вікна:

window.addEventListener('resize', function() {
    if (window.innerWidth < 600) {
        element.style.borderTopLeftRadius = '15px';
    } else {
        element.style.borderTopLeftRadius = '30px';
    }
});

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

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

правити

Порада

Для додаткової взаємодії з користувачем змінюйте радіус заокруглення в залежності від подій. Наприклад, при натисканні кнопки змінюйте радіус кута:

button.addEventListener('click', function() {
    element.style.borderTopLeftRadius = '25px';
});

Це допоможе зробити інтерфейс більш інтерактивним.

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

Порада

Для плавної зміни радіусу заокруглення використовуйте CSS-транзішн. Додавання плавного переходу допоможе зробити зміни менш різкими і більш привабливими для користувача. Спочатку задайте стиль у CSS:

element {
    transition: border-top-left-radius 0.5s ease;
}

А потім змінюйте радіус у JavaScript:

element.style.borderTopLeftRadius = '20px';

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

Порада

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

if (element.style.borderTopLeftRadius !== '15px') {
    element.style.borderTopLeftRadius = '15px';
}

Це дозволить уникнути зайвих перерендерів і забезпечить більш плавну роботу додатка.

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

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

Синтаксис

element.style.borderTopLeftRadius

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

let element = document.getElementById('animatedElement');
let radius = 0;
let increment = true;

setInterval(function() {
    if (increment) {
        radius += 2;
        if (radius >= 50) {
            increment = false;
        }
    } else {
        radius -= 2;
        if (radius <= 0) {
            increment = true;
        }
    }
    element.style.borderTopLeftRadius = radius + 'px';
}, 50);

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

let element = document.getElementById('interactiveElement');

document.addEventListener('mousemove', function(event) {
    let radius = Math.min(event.clientX / 10, 100); // Максимальний радіус - 100px
    element.style.borderTopLeftRadius = radius + 'px';
});