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

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

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

Щоб почати використовувати element.style.borderImage, необхідно, по-перше, додати зображення, яке буде використовуватися як рамка, і по-друге, налаштувати параметри для правильного відображення цієї рамки. Розглянемо декілька прикладів використання цієї властивості.

Тепер розглянемо приклад, де ми будемо динамічно змінювати зображення рамки за допомогою JavaScript. Це може бути корисним для створення інтерактивних елементів на сторінці, наприклад, при натисканні на кнопку змінювати рамку елемента:

<div id="myElement">Зміст елемента</div>
<button id="changeBorderButton">Змінити рамку</button>

<script>
let element = document.getElementById('myElement');
let button = document.getElementById('changeBorderButton');
let borders = ['url("border-image1.png")', 'url("border-image2.png")'];
let currentIndex = 0;

// Початкова рамка
element.style.borderImageSource = borders[currentIndex];

button.addEventListener('click', function() {
  currentIndex = (currentIndex + 1) % borders.length;
  element.style.borderImageSource = borders[currentIndex];
});
</script>

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

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

правити

Порада

Використовуйте borderImageRepeat для налаштування способу повторення зображення. Властивість borderImageRepeat дозволяє визначити, як зображення буде повторюватися вздовж рамки – stretch, repeat або round. Це може бути корисним для створення безшовних рамок або для того, щоб уникнути спотворення зображення при установці його як рамку:

let element = document.getElementById('repeatExample');
element.style.borderImageSource = 'url("repeat-border.png")';
element.style.borderImageSlice = '25%';
element.style.borderImageRepeat = 'repeat';

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

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

Порада

Експериментуйте з різними значеннями для властивості borderImageSlice, щоб досягти бажаного вигляду рамки. Властивість borderImageSlice вказує, як розрізати зображення на частини для розподілу його по рамці. Ви можете використовувати один, два, три або чотири значення, щоб налаштувати різні частини зображення по-різному:

let element = document.getElementById('sliceExample');
element.style.borderImageSource = 'url("slice-border.png")';
element.style.borderImageSlice = '30 10 20 40'; // Верх, правий, низ, лівий

Це дозволить вам отримати більше контролю над тим, як зображення розподіляється по рамці.

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

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

Синтаксис

element.style.borderImage

Переглядачі

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

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

Переглядач
	16	15	6	11	12	11

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

Переглядач
	4.4	18	15	6

Приклади

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

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

// Отримуємо елемент за його ідентифікатором
var element = document.getElementById('myElement');

// Змінюємо колір лівої межі на червоний
element.style.borderLeft = '2px solid red';

<div id="dynamicElement">Вміст елемента</div>
<button id="changeBorderButton">Змінити рамку</button>

#dynamicElement {
    padding: 16px;
    border: 12px solid transparent;
    margin-bottom: 10px;
}

let element = document.getElementById('dynamicElement');
let button = document.getElementById('changeBorderButton');

// border-image приймає і градієнти — файли не потрібні
let borders = [
    ['linear-gradient(45deg, #0172ad, #9dcb4e)', '30'],
    ['linear-gradient(45deg, #d81b60, #ffb300)', '40'],
];
let currentIndex = 0;

function applyBorder() {
    element.style.borderImageSource = borders[currentIndex][0];
    element.style.borderImageSlice = borders[currentIndex][1];
}

applyBorder();

button.addEventListener('click', function () {
    currentIndex = (currentIndex + 1) % borders.length;
    applyBorder();
});