css.in.ua
Підтримати

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

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

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

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

element.style.borderRadius — це властивість, яка дозволяє змінювати або встановлювати радіус закруглення кутів рамки елемента.

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

Для встановлення значення borderRadius, використовуйте наступний синтаксис:

element.style.borderRadius = 'значення';

Де значення може бути вказане у пікселях (px), відсотках (%) або інших допустимих одиницях виміру. Наприклад, якщо необхідно закруглити всі кути рамки елемента до радіусу 10 пікселів, ви можете використати такий код:

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

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

Якщо потрібно встановити різні значення для кожного кута, можна використати до чотирьох значень, розділених пробілами. Наприклад:

element.style.borderRadius = '10px 20px 30px 40px';

Це значення означає:

  • Верхній лівий кут — 10 пікселів
  • Верхній правий кут — 20 пікселів
  • Нижній правий кут — 30 пікселів
  • Нижній лівий кут — 40 пікселів

Можна також використовувати відсоткові значення. Наприклад:

element.style.borderRadius = '50%';

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

Щоб видалити закруглення кутів, просто встановіть borderRadius до значення 0 або '0px':

element.style.borderRadius = '0';

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

Таким чином, element.style.borderRadius забезпечує гнучкість і динамічність у налаштуванні стилів елементів, дозволяючи створювати привабливі та адаптивні веб-сторінки.

Порада:

Можна анімувати зміну значення borderRadius для створення плавних переходів. Використовуйте CSS-властивість transition, щоб додати анімацію до змін радіусу закруглення. Наприклад, додайте наступний код перед зміною borderRadius:

element.style.transition = 'border-radius 0.5s ease';
element.style.borderRadius = '20px';

Це дозволить вам створити приємні візуальні ефекти на вашій сторінці.
Порада:

Якщо потрібно зберегти оригінальний стиль елемента перед зміною borderRadius, використовуйте властивість getComputedStyle. Це допоможе вам отримати поточне значення і повернути його після необхідних змін. Наприклад:

let originalBorderRadius = getComputedStyle(element).borderRadius;
element.style.borderRadius = '15px';
// Повернути оригінальне значення
element.style.borderRadius = originalBorderRadius;

Це корисно для тимчасових змін стилів.
Порада:

Використовуйте borderRadius у комбінації з медіа-запитами для адаптивного дизайну. Це дозволить вам змінювати радіус закруглення залежно від розміру вікна перегляду або пристрою. Наприклад:

if (window.innerWidth < 600) {
  element.style.borderRadius = '5px';
} else {
  element.style.borderRadius = '20px';
}

Це забезпечить оптимальний вигляд елементів на різних пристроях.

Синтаксис

element.style.borderRadius

Значення

Return

Переглядачі

Переглядач

1

1

3

8

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


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

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

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

element.addEventListener('mouseover', () => {
    element.style.transition = 'border-radius 0.5s ease';
    element.style.borderRadius = '50%';
});

element.addEventListener('mouseout', () => {
    element.style.borderRadius = '0';
});

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

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

window.addEventListener('resize', () => {
    if (window.innerWidth < 600) {
        element.style.borderRadius = '10px';
    } else if (window.innerWidth < 900) {
        element.style.borderRadius = '20px';
    } else {
        element.style.borderRadius = '30px';
    }
});

Документи

Зв'язок