Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Lebar Gambar HTML Menggunakan borderImageWidth Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti borderImageWidth Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai lebar dari border image.


Sebelum memahami lebih dalam materi tentang Mengatur Lebar Gambar HTML Menggunakan borderImageWidth Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Batas Sumber Gambar HTML borderImageSource DOM, Mengatur Irisan Gambar HTML borderImageSlice Style DOM, dan Mengatur Batas Perulangan Gambar HTML borderImageRepeat DOM.

Sintak:
  • berfungsi untuk mengembalikan nilai properti borderImageWidth: object.style.borderImageWidth
  • berfungsi untuk mengatur nilai properti borderImageWidth: object.style.borderImageWidth = "number|percentage|auto|initial|inherit"

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

Baca Juga:

Property Values:
  • number: digunakan untuk mengatur nilai lebar sebagai nilai komputasi koresponden ganda dari border-width. Nilai properti ini akan menjadi default jika diatur ke angka 1.
  • length: digunakan untuk mengatur nilai lebar dalam satuan unit length.
  • percentage: digunakan untuk mengatur nilai lebar dalam satuan persen. Nilai persen merupakan nilai relatif terhadap nilai lebar dari border image area untuk horizontal offsets, dan nilai panjang dari border image area untuk vertical offsets.
  • auto: membuat nilai lebar dari border adalah setara dengan nilai lebar intrinsik atau panjang intrinsik dari corresponding image slice.
  • initial: digunakan untuk mengatur properti borderImageWidth ke nilai default.
  • inherit: menerima nilai properti turunan dari elemen parent.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderImageWidth DOM

</title>

 

<style>

.item 

{

height: 70px;

border: 10px solid transparent;

border-image:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlSiYauLDl9S5f83REfDnSdXru4UHijiKfLmuxx_2vhqkARLlEqT2BM2_NhXy_cYOJkUuY40JJ4bZguAuip2_3fo9oMdjyLiyXRljhdIL8mUZ_cKN3mIQj4h2aCs3GqTc_Xc9UYHjQUej_VNzA8pp_GatXLiFSdPob66D5ndmGVYUPGdVOQ_z9UNE/w320-h320/blogmapel%20(21).jpg');

border-image-slice: 60;

border-image-repeat: round;

text-align:center;

padding-top:20px;

font-size:40px;

font-weight:bold;

}

</style>

 

</head>

 

<body>

 

<h2>

Properti Style 

borderImageWidth DOM

</h2>

 

<p>

Klik tombol untuk mengubah 

lebar dari border-image

</p>

 

<div class = "item">

Blog Elfan

</div>

 

<button 

onclick = "changeWidth()">

Click Here!

</button>

 

<script>

function changeWidth() 

{

elem = document.querySelector('.item');

// Pengaturan lebar gambar ke 

// kelipatan 3

elem.style.borderImageWidth = '3';

}

</script>

 

</body>

 

</html>

Output:

Properti Style borderImageWidth DOM

Klik tombol untuk mengubah lebar dari border-image

Blog Elfan


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderImageWidth DOM

</title>

 

<style>

.item 

{

height: 70px;

border: 10px solid transparent;

border-image:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlSiYauLDl9S5f83REfDnSdXru4UHijiKfLmuxx_2vhqkARLlEqT2BM2_NhXy_cYOJkUuY40JJ4bZguAuip2_3fo9oMdjyLiyXRljhdIL8mUZ_cKN3mIQj4h2aCs3GqTc_Xc9UYHjQUej_VNzA8pp_GatXLiFSdPob66D5ndmGVYUPGdVOQ_z9UNE/w320-h320/blogmapel%20(21).jpg');

border-image-slice: 60;

border-image-repeat: round;

text-align:center;

padding-top:20px;

font-size:40px;

font-weight:bold;

}

</style>

 

</head>

 

<body>

 

<h2>

Properti Style 

borderImageWidth DOM

</h2>

 

<p>

Klik tombol untuk mengubah 

lebar dari border-image

</p>

 

<div 

class = "item">

Blog Elfan

</div>

 

<button 

onclick = "changeWidth()">

BLog TIK

</button>

 

<script>

function changeWidth() 

{

elem = document.querySelector('.item');

// Pengaturan lebar gambar 

// dalam ukuran tiga kali 

// lipat

elem.style.borderImageWidth = '30px';

}

</script>

 

</body>

 

</html>

Output:

Properti Style borderImageWidth DOM

Klik tombol untuk mengubah lebar dari border-image

Blog Elfan


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderImageWidth DOM

</title>

 

<style>

.item 

{

height: 70px;

border: 10px solid transparent;

border-image:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlSiYauLDl9S5f83REfDnSdXru4UHijiKfLmuxx_2vhqkARLlEqT2BM2_NhXy_cYOJkUuY40JJ4bZguAuip2_3fo9oMdjyLiyXRljhdIL8mUZ_cKN3mIQj4h2aCs3GqTc_Xc9UYHjQUej_VNzA8pp_GatXLiFSdPob66D5ndmGVYUPGdVOQ_z9UNE/w320-h320/blogmapel%20(21).jpg');

border-image-slice: 60;

border-image-repeat: round;

text-align:center;

padding-top:20px;

font-size:40px;

font-weight:bold;

}

</style>

 

</head>

 

<body>

 

<h2>

Properti Style 

borderImageWidth DOM

</h2>

 

<p>

Klik tombol untuk mengubah 

ukuran lebar dari border-image

</p>

 

<div class = "item">

Blog Elfan

</div>

 

<button 

onclick = "changeWidth()">

Blog TIK

</button>

 

<script>

function changeWidth() 

{

elem = document.querySelector('.item');

// Pengaturan lebar gambar ke 

// ukuran tiga kali lipat

elem.style.borderImageWidth = '10%';

}

</script>

 

</body>

 

</html>

Output:

Properti Style borderImageWidth DOM

Klik tombol untuk mengubah ukuran lebar dari border-image

Blog Elfan


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderImageWidth DOM

</title>

 

<style>

.item 

{

height: 70px;

border: 10px solid transparent;

border-image:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlSiYauLDl9S5f83REfDnSdXru4UHijiKfLmuxx_2vhqkARLlEqT2BM2_NhXy_cYOJkUuY40JJ4bZguAuip2_3fo9oMdjyLiyXRljhdIL8mUZ_cKN3mIQj4h2aCs3GqTc_Xc9UYHjQUej_VNzA8pp_GatXLiFSdPob66D5ndmGVYUPGdVOQ_z9UNE/w320-h320/blogmapel%20(21).jpg');

border-image-slice: 60;

border-image-repeat: round;

text-align:center;

padding-top:20px;

font-size:40px;

font-weight:bold;

}

</style>

 

</head>

 

<body>

 

<h2>

Properti Style 

borderImageWidth DOM

</h2>

 

<p>

Klik tombol untuk mengubah 

ukuran lebar dari border-image

</p>

 

<div 

class = "item">

Blog Elfan

</div>

 

<button 

onclick = "changeWidth()">

Blog TIK

</button>

 

<script>

function changeWidth() 

{

elem = document.querySelector('.item');

// Pengaturan lebar gambar 

dalam ukuran tiga kali lipat

elem.style.borderImageWidth = 'auto';

}

</script>

 

</body>

 

</html>

Output:

Properti Style borderImageWidth DOM

Klik tombol untuk mengubah ukuran lebar dari border-image

Blog Elfan


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderImageWidth DOM

</title>

 

<style>

.item 

{

height: 70px;

border: 10px solid transparent;

border-image:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlSiYauLDl9S5f83REfDnSdXru4UHijiKfLmuxx_2vhqkARLlEqT2BM2_NhXy_cYOJkUuY40JJ4bZguAuip2_3fo9oMdjyLiyXRljhdIL8mUZ_cKN3mIQj4h2aCs3GqTc_Xc9UYHjQUej_VNzA8pp_GatXLiFSdPob66D5ndmGVYUPGdVOQ_z9UNE/w320-h320/blogmapel%20(21).jpg');

border-image-slice: 60;

border-image-repeat: round;

text-align:center;

padding-top:20px;

font-size:40px;

font-weight:bold;

}

</style>

 

</head>

 

<body>

 

<h2>

Properti Style 

borderImageWidth DOM

</h2>

 

<p>

Klik tombol untuk mengubah 

ukuran lebar dari border-image

</p>

 

<div 

class = "item">

Blog Elfan

</div>

 

<button 

onclick = "changeWidth()">

Blog TIK

</button>

 

<script>

function changeWidth() 

{

elem = document.querySelector('.item');

// Pengaturan lebar gambar 

// menjadi tiga kali lipat

elem.style.borderImageWidth = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Properti Style borderImageWidth DOM

Klik tombol untuk mengubah ukuran lebar dari border-image

Blog Elfan


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style 

borderImageWidth DOM

</title>

 

<style>

.item 

{

height: 70px;

border: 10px solid transparent;

border-image:

url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlSiYauLDl9S5f83REfDnSdXru4UHijiKfLmuxx_2vhqkARLlEqT2BM2_NhXy_cYOJkUuY40JJ4bZguAuip2_3fo9oMdjyLiyXRljhdIL8mUZ_cKN3mIQj4h2aCs3GqTc_Xc9UYHjQUej_VNzA8pp_GatXLiFSdPob66D5ndmGVYUPGdVOQ_z9UNE/w320-h320/blogmapel%20(21).jpg');

border-image-slice: 60;

border-image-repeat: round;

text-align:center;

padding-top:20px;

font-size:40px;

font-weight:bold;

}

 

.Bonss 

{

/* Pengaturan border-width 

 dari parent */

border-image-width: 30px;

}

</style>

 

</head>

 

<body>

 

<h2>

Properti Style 

borderImageWidth DOM

</h2>

 

<p>

Klik tombol untuk mengubah 

ukuran lebar dari border-image

</p>

 

<div class = "Bonss">

<div class = "item">

Blog Elfan

</div>

</div>

 

<button 

onclick = "changeWidth()">

Blog TIK

</button>

 

<script>

function changeWidth() 

{

elem = document.querySelector('.item');

// Pengaturan lebar gambar ke 

// nilai turunannya

elem.style.borderImageWidth = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Properti Style borderImageWidth DOM

Klik tombol untuk mengubah ukuran lebar dari border-image

Blog Elfan

Artikel ini didedikasikan kepada: Indah Novitasari, Intan Purnama Putri Damayanti, Irvak Iqrammullah Raharyudar, Irwan Syah, dan Ismatul Maula.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Lebar Gambar HTML Menggunakan borderImageWidth Style DOM"

  1. AnonimSabtu, 21 Mei 2022 pukul 20.20.00 WIB

    Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderImageWidth Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSabtu, 21 Mei 2022 pukul 20.21.00 WIB

      Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderImageWidth Style DOM pada HTML:
      1. Chrome
      2. Internet Explorer 11
      3. Firefox
      4. Safari 6

      Hapus
  2. AnonimJumat, 10 Juni 2022 pukul 08.47.00 WIB

    Apa yang dimaksud dengna properti borderImageWidth Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimJumat, 10 Juni 2022 pukul 08.47.00 WIB

      Properti borderImageWidth Style DOM pada HTML digunakan untuk menentukan ukuran lebar dari batas gambar yang dikenai properti tersebut.

      Hapus
    2. AnonimJumat, 10 Juni 2022 pukul 08.47.00 WIB

      Properti HTML DOM borderImageWidth digunakan untuk mengatur atau mendapatkan nilai lebar gambar perbatasan untuk suatu elemen.

      Hapus

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 -