7 Value Properti borderImage Style DOM pada HTML

Properti Style borderImage DOM pada HTML merupakan properti singkatan yang digunakan untuk mengatur properti borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset, dan borderImageRepeat.

Sintak:
  • digunakan untuk mengembalikan nilai properti borderImage: object.style.borderImage
  • digunakan untuk mengatur nilai properti borderImage: object.style.borderImage = "source slice width outset repeat|initial|inherit"

Property Values: terdapat 7 value properti yang dapat digunakan pada properti borderImage yang dijelaskan sebagai berikut.
  • border-Image-Source: digunakan untuk menampung sumber gambar yang akan digunakan pada properti.
  • border-Image-Slice: digunakan untuk menentukan inward offsets dari image-border.
  • border-Image-Width: digunakan untuk menampung ukuran lebar dari border image yang akan digunakan.
  • border-Image-Outset: digunakan untuk mendefinisikan border area yang akan diperlebar.
  • border-Image-Repeat: digunakan untuk mendefinisikan border yang harus dilakukan proses repeated, rounded, atau stretched.
  • initial: digunakan untuk mengembalikan nilai default dari properti.
  • inherit: digunakan untuk menerima turunan properti dari elemen parent.

Return Values: berfungsi untuk mengembalikan sebuah nilai strig yang merepresentasikan properti border-image dari suatu elemen.

Contoh: memperlihatkan perubahan dari border-image.

<!DOCTYPE html>

<html>

 

<head>

<style>

#my 

{

border: 50px solid transparent;

width: 250px;

padding: 15px 15px;

 

<!-- Logo SMANDELA -->

-webkit-border-image:

url(https://1.bp.blogspot.com/-mhjmreJwUG4/YGfcp6l6BxI/AAAAAAAANpQ/qBy8tiBe1qMEtMDBHUXM1yhhkhgPGUmPgCLcBGAsYHQ/s2048/logo%2Bsman%2B8%2Bsemarang.png)

100 100 stretch;

 

<!-- Logo SMAGA -->

-o-border-image:

url(https://1.bp.blogspot.com/-w8812IJPxIg/YXKqmFK7DKI/AAAAAAAAOSs/sMgEsPptVHI2X_N6T_QmTo7Rp1e3jASEgCLcBGAsYHQ/s2048/Untitled-2.png)

100 100 stretch;

 

border-image:

url(https://1.bp.blogspot.com/-0LmqGj7pUKw/YUy39NnNlNI/AAAAAAAAOPE/2HEMmOSB5vkK5VrkohcfOsMn1bBwTGE_gCLcBGAsYHQ/s393/Capture.PNG)

100 100 stretch;

}

</style>

</head>

 

<body>

 

<h3>

Klik tombol "Change" untuk 

mengubah properti border-image

</h3>

 

<button 

onclick="myFunction()">

Change

</button>

 

<div id="my">

<h1>

<font color="green">

Blog Elfan

</font>

</h1>

</div>

<script>

function myFunction() 

{

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

"url(https://1.bp.blogspot.com/-mhjmreJwUG4/YGfcp6l6BxI/AAAAAAAANpQ/qBy8tiBe1qMEtMDBHUXM1yhhkhgPGUmPgCLcBGAsYHQ/s2048/logo%2Bsman%2B8%2Bsemarang.png)30 30 round";

 

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

"url(https://1.bp.blogspot.com/-w8812IJPxIg/YXKqmFK7DKI/AAAAAAAAOSs/sMgEsPptVHI2X_N6T_QmTo7Rp1e3jASEgCLcBGAsYHQ/s2048/Untitled-2.png)30 30 round";

 

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

"url(https://1.bp.blogspot.com/-0LmqGj7pUKw/YUy39NnNlNI/AAAAAAAAOPE/2HEMmOSB5vkK5VrkohcfOsMn1bBwTGE_gCLcBGAsYHQ/s393/Capture.PNG)30 30 round";

}

</script>

 

</body>

 

</html>

Komentar

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

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti borderStyle DOM pada HTML:
      1. Google Chrome 1.0
      2. Internet Explorer 4.0
      3. Firefox 1.0
      4. Opera 3.5
      5. Safari 1.0

      Hapus
  2. Apa yang dimaksud dengan properti borderImage style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti borderImage Style DOM pada HTML merupakan properti sytle yang dapat digunakan untuk mengatur properti borderImageSource, borderImageSlice, borderImgaeWidth, borderImageOutset, dan borderImageRepeat pada elemen HTML.

      Hapus
    2. Properti borderImage Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mendapatkan gambar batas dari suatu elemen.

      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