Properti borderImageRepeat DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai properti borderImageRepeat. Properti ini berfungsi untuk menentukan apakah border-image harus fill atau stretched area, mengatur nilai inisial, menerima nilai turunan dari parent, dan lain sebagainya. Properti borderImageRepeat penggunaannya bergantung pada kebutuhkan yang akan digunakan untuk membuat image-border terlihat lebih atraktif.

Sebelum memahami lebih dalam materi tentang Mengatur Batas Perulangan Gambar HTML borderImageRepeat DOM, terlebih dahulu pelajari materi tentang: Mengatur Batas Gambar HTML Menggunakan borderImageOutset Style DOM, Mengatur Batas Gambar HTML Menggunakan borderImage Style DOM, dan Mengatur Warna Batas HTML Menggunakan borderColor Style DOM.

Sintak:

Berfungsi untuk mengembalikan nilai properti borderImageRepeat: object.style.borderImageRepeat
Berfungsi untuk mengatur nilai properti borderImageRepeat: object.style.borderImageRepeat="stretch|repeat|round|initial|inherit"

Return Values: digunakan untuk mengembalikan nilai border-image.

Baca Juga:

Property Values:

stretch: digunakan untuk stretch gambar yang memenuhi seluruh area, dan merupakan nilai default dari properti borderImageRepeat. Sintak: object.style.borderImageRepeat="stretch";
repeat: digunakan untuk melakukan perulangan border-image untuk memenuhi seluruh area. Sintak: object.style.borderImageRepeat = "repeat";
round: digunakan untuk melakukan perulangan image atau gambar untuk memenuhi area. Jika image yang digunakan tidak memenuhi area pada keseluruhan bingkat, maka akan dilakukan pengukuran skala ulang terhadap gambar. Sintak: object.style.borderImageRepeat = "round";
space: perbedaan antara nilai repeat adalah, jika nilai yang diberikan tidak memenuhi area keseluruhan ubin, maka ruang atau spasi tambahan akan diberikan disepanjang ubin tersebut. Sintak: object.style.borderImageRepeat = "space";
initial: digunakan untuk mengatur properti borderImageRepeat ke nilai default-nya.
inherit: digunakan untuk mengatur properti borderImageRepeat dari nilai elemen parent-nya.

Contoh:

<!DOCTYPE html>

<html>

<head>

<style>

#MKK1

{

border: 20px solid transparent;

width: 200px;

padding: 10px 20px;

/* Untuk Browser Safari */

-webkit-border-image: url(

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 round;

/* Untuk Browser Opera */

-o-border-image: url(

border-image: url(

}

</style>

</head>

<body>

<div

id = "MKK1">

<h1>

Blog Elfan

</h1>

</div>

<br>

<button

onclick = "Bonbon1()">

Click Here!

</button>

<p>

Klik tombol untuk mengubah

properti.

</p>

function Bonbon1()

{

/* Untuk Browser Safari */

document.getElementById("MKK1").style.WebkitBorderImage =

"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 stretch";

/* Untuk Browser Opera */

document.getElementById("MKK1").style.OBorderImage =

document.getElementById("MKK1").style.borderImage =

}

</script>

</body>

</html>

Output:

Blog Elfan

Klik tombol untuk mengubah properti.

Contoh:

<!DOCTYPE html>

<html>

<head>

<style>

#MFF2

{

border: 15px solid transparent;

width: 200px;

padding: 10px 20px;

/* Untuk Browser Safari */

-webkit-border-image: url(

/* Untuk Browser Opera */

-o-border-image: url(

border-image: url(

}

</style>

</head>

<body>

<div

id = "MFF2">

<h1>

Blog Elfan

</h1>

</div>

<br>

<button

onclick="Bobon2()">

Click Here!

</button>

<p>

Klik tombol untuk mengubah

properti.

</p>

function Bobon2()

{

/* Untuk Browser Safari */

document.getElementById("MFF2").style.WebkitBorderImage =

/* Untuk Browser Opera */

document.getElementById("MFF2").style.OBorderImage =

document.getElementById("MFF2").style.borderImage =

}

</script>

</body>

</html>

Output:

Blog Elfan

Klik tombol untuk mengubah properti.

Contoh:

<!DOCTYPE html>

<html>

<head>

<style>

#BNM3 {

border: 15px solid transparent;

width: 200px;

padding: 10px 20px;

/* Untuk Browser Safari */

-webkit-border-image: url(

/* Untuk Browser Opera */

-o-border-image: url(

border-image: url(

}

</style>

</head>

<body>

<div

id = "BNM3">

<h1>

Blog Elfan

</h1>

</div>

<br>

<button

onclick="Bonbon3()">

Click Here!

</button>

<p>

Klik tombol untuk mengubah properti.

</p>

function Bonbon3()

{

/* Untuk Browser Safari */

document.getElementById("BNM3").style.WebkitBorderImage =

/* Untuk Browser Opera */

document.getElementById("BNM3").style.OBorderImage =

document.getElementById("BNM3").style.borderImage =

}

</script>

</body>

</html>

Output:

Blog Elfan

Klik tombol untuk mengubah properti.

Contoh:

<!DOCTYPE html>

<html>

<head>

<style>

#BNK4 {

border: 15px solid transparent;

width: 200px;

padding: 10px 20px;

/* Untuk Browser Safari */

-webkit-border-image: url(

/* Untuk Browser Opera */

-o-border-image: url(

border-image: url(

}

</style>

</head>

<body>

<div

id="BNK4">

<h1>

Blog Elfan

</h1>

</div>

<br>

<button

onclick="Bonbon4()">

Click Here!

</button>

<p>

Klik tombol untuk mengubah properti.

</p>

function Bonbon4()

{

/* Untuk Browser Safari */

document.getElementById("BNK4").style.WebkitBorderImage =

/* Untuk Browser Opera */

document.getElementById("BNK4").style.OBorderImage =

document.getElementById("BNK4").style.borderImage =

}

</script>

</body>

</html>

Output:

Blog Elfan

Klik tombol untuk mengubah properti.

Referensi Tambahan:

Artikel ini didedikasikan kepada: Gladiza Cahyandaru Hakiki, Hanityo Rizky Pratama Widodo, Helga Maulida Qonitah, Indah Novitasari, dan Intan Purnama Putri Damayanti.

Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Batas Perulangan Gambar HTML borderImageRepeat DOM"

AnonimKamis, 12 Mei 2022 pukul 07.41.00 WIB
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderImageRepeat Style DOM pada HTML?
BalasHapus
Balasan
AnonimJumat, 10 Juni 2022 pukul 08.33.00 WIB
Apa yang dimaksud dengan properti borderImageRepeat Style DOM HTML?
BalasHapus
Balasan

Tambahkan komentar

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -

E-SISTEM:	Bahasa Pemrograman:
open_in_newE-RAPORT open_in_newE-PERPUS open_in_newE-LITERASI open_in_newE-KONSELING	open_in_newBahasa HTML open_in_newBahasa C open_in_newBahasa Java open_in_newBahasa C++
Materi Penelitian:	Administrasi Siswa:
open_in_newKlasifikasi Penelitian open_in_newPenelitian Tindakan Kelas open_in_newStatistika Penelitian open_in_newContoh Skripsi	open_in_newNilai dan Arsip open_in_newPerbaikan Data open_in_newKatalog Siswa open_in_newBuku Digital
Referensi Umum:	Magic
open_in_newMapel Informatika open_in_newLogo Instansi dan Organisasi open_in_newArtikel open_in_newTools dan Game	Mystery Box

PENELITIAN.ID

Mengatur Batas Perulangan Gambar HTML borderImageRepeat DOM

Blog Elfan

Blog Elfan

Blog Elfan

Blog Elfan

5 komentar untuk "Mengatur Batas Perulangan Gambar HTML borderImageRepeat DOM"

Menu Halaman Statis