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

Синтаксис

element.style.borderTopLeftRadius

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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);

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

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