4 Contoh Penggunaan Properti borderImageRepeat Style DOM pada HTML

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.

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 Value: digunakan untuk mengembalikan nilai border-image.

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://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 round;

 

/* Untuk Browser Opera */

-o-border-image: url(

"https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 round;

border-image: url(

"https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 round;

}

</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>

 

<script>

function Bonbon1() 

{

/* Untuk Browser Safari */

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 stretch";

 

/* Untuk Browser Opera */

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 stretch";

 

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 stretch";

}

</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(

"https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 stretch;

 

/* Untuk Browser Opera */

-o-border-image: url(

"https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 stretch;

 

border-image: url(

"https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 stretch;

}

</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>

 

<script>

function Bobon2() 

{

/* Untuk Browser Safari */

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 repeat";

 

/* Untuk Browser Opera */

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 repeat";

 

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 repeat";

}

</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(

"https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 stretch;

 

/* Untuk Browser Opera */

-o-border-image: url(

"https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 stretch;

 

border-image: url(

"https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 stretch;

}

</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>

 

<script>

function Bonbon3() 

{

/* Untuk Browser Safari */

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 round";

 

/* Untuk Browser Opera */

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 round";

 

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 round";

}

</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(

"https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 stretch;

 

/* Untuk Browser Opera */

-o-border-image: url(

"https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 stretch;

 

border-image: url(

"https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG") 50 50 stretch;

}

</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>

 

<script>

function Bonbon4() 

{

/* Untuk Browser Safari */

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 space";

 

/* Untuk Browser Opera */

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 space";

 

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

"url(https://1.bp.blogspot.com/-Q-q0nEH-zuc/YRdMev-pKQI/AAAAAAAAOFc/KrF8pttjEx0WFKXfQZK6QN05XxqtvAadACLcBGAsYHQ/s1395/gambar%2B1.PNG) 50 50 space";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan


Klik tombol untuk mengubah properti.

Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderImageRepeat Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderImageRepeat Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer 11.0
      3. Mozilla firefox
      4. Safari 6.0

      Hapus

Posting Komentar

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

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C