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

Приклади

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

<header>
<h2 class="title">element.style.borderImage</h2>
<p class="description">Встановлює зображення як рамку навколо HTML-елемента.</p>
</header>
<main>
<div class="result">
  <div id="borderBox">Демонстрація</div>
  <div id="controls">
    <button onclick="changeBorder(FRAME, 30)">Рамка 1</button>
    <button onclick="changeBorder(FRAME, 40)">Рамка 2</button>
    <button onclick="changeBorder(FRAME, 50)">Рамка 3</button>
  </div>
</div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#borderBox {
  width: 200px;
  height: 200px;
  border: 20px solid transparent; /* Потрібно встановити прозорий колір для border */
  text-align: center;
  line-height: 200px;
}

#controls {
  margin-top: 20px;
}

#controls button {
  padding: 10px;
  font-family: monospace;
  margin-right: 10px;
}

// Рамка зібрана просто тут — приклад нічого не вантажить із мережі
const FRAME = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='200'><rect width='300' height='200' fill='%23ffd400'/><rect x='30' y='30' width='240' height='140' fill='%23222'/><circle cx='15' cy='15' r='11' fill='%23e0431f'/><circle cx='285' cy='15' r='11' fill='%23e0431f'/><circle cx='15' cy='185' r='11' fill='%23e0431f'/><circle cx='285' cy='185' r='11' fill='%23e0431f'/></svg>";

function changeBorder(imageUrl, slice) {
  let borderBox = document.getElementById('borderBox');
  borderBox.style.borderImageSource = 'url("' + imageUrl + '")';
  borderBox.style.borderImageSlice = slice;
}

// Встановлення початкової рамки
changeBorder(FRAME, 30);
//# sourceURL=pen.js

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