Mengatur Batas Sumber Gambar HTML borderImageSource DOM
 |
| Ilustrasi borderImageSource HTML |
- untuk mendapatkan nilai properti borderImageSource: object.style.borderImageSource
- untuk mengatur properti borderImageSource: object.style.borderImageSource = "none|image|initial|inherit"
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti border-image-source dari suatu elemen.
Property Values:
- none: merupakan nilai properti default, yang mengatur properti untuk tidak menggunakan image apapun.
- image: berfungsi untuk mengatur gambar ke path yang telah ditentukan.
- initial: digunakan untuk mengatur properti ke nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style
borderImageSource DOM
</title>
<style>
.item
{
height: 50px;
border: 25px solid transparent;
/* Mengatur border sebelum
demonstrasi efek dari 'none'
*/
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');
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style
borderImageSource DOM
</b>
<p>
Klik tombol untuk mengubah
sumber dari border-image
</p>
<div
class="item">
Blog TIK
</div>
<button
onclick="changeSource()">
Ubah source dari border-image
</button>
<script>
function changeSource()
{
elem = document.querySelector('.item');
// Mengatur source border
// image ke tipe none
elem.style.borderImageSource = "none";
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderImageSource DOMKlik tombol untuk mengubah sumber dari border-image
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style
borderImageSource DOM
</title>
<style>
.item
{
height: 50px;
border: 25px solid transparent;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style
borderImageSource DOM
</b>
<p>
Klik tombol untuk mengubah
sumber dari border-image
</p>
<div
class="item">
Blog TIK
</div>
<button
onclick="changeSource()">
Mengubah sumber border-image
</button>
<script>
function changeSource()
{
elem = document.querySelector('.item');
// Pengaturan source border
// image ke image lainnya
elem.style.borderImageSource =
"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQlSiYauLDl9S5f83REfDnSdXru4UHijiKfLmuxx_2vhqkARLlEqT2BM2_NhXy_cYOJkUuY40JJ4bZguAuip2_3fo9oMdjyLiyXRljhdIL8mUZ_cKN3mIQj4h2aCs3GqTc_Xc9UYHjQUej_VNzA8pp_GatXLiFSdPob66D5ndmGVYUPGdVOQ_z9UNE/w320-h320/blogmapel%20(21).jpg')";
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderImageSource DOMKlik tombol untuk mengubah sumber dari border-image
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style
borderImageSource DOM
</title>
<style>
.item
{
height: 50px;
border: 25px solid transparent;
/* Pengaturan border untuk
demonstrasi efek dari
'initial' */
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');
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style
borderImageSource DOM
</b>
<p>
Klik tombol untuk mengubah
source dari border-image
</p>
<div
class="item">
Blog TIK
</div>
<button
onclick="changeSource()">
Ubah source dari border-image
</button>
<script>
function changeSource()
{
elem = document.querySelector('.item');
// Pengaturan border image ke
// initial
elem.style.borderImageSource = "initial";
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderImageSource DOMKlik tombol untuk mengubah source dari border-image
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style
borderImageSource DOM
</title>
<style>
.item
{
height: 50px;
border: 25px solid transparent;
}
#parent
{
/* Pengaturan border dari
domonstrasi parent efek dari
'inherit' */
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');
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style
borderImageSource DOM
</b>
<p>
Klik tombol untuk mengubah
source dari border-image
</p>
<div
id="parent">
<div
class="item">Blog Elfan
</div>
</div>
<button
onclick="changeSource()">
Ubah source dari border-image
</button>
<script>
function changeSource()
{
elem = document.querySelector('.item');
// Pengaturan source border
// image ke turunan dari
// parent
elem.style.borderImageSource = "inherit";
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderImageSource DOMKlik tombol untuk mengubah source dari border-image
- 6 Value Properti borderLeftWidth Style DOM pada HTML [klik]
- 4 Value Properti borderRadius Style DOM pada HTML [klik]
- 5 Value Properti borderRight Style DOM pada HTML [klik]
- 2 Contoh Penggunaan Tag Legend untuk Pendefinisian Title HTML [klik]
- 12 Nilai Properti borderRightStyle DOM pada HTML [klik]
- 6 Nilai Properti borderRightWidth Style DOM pada HTML [klik]
- 3 Value Properti borderSpacing Style DOM pada HTML [klik]
5 komentar untuk "Mengatur Batas Sumber Gambar HTML borderImageSource DOM"
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 -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderImageSource Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderImageSource Style DOM pada HTML:
Hapus1. Chrome
2. Internet Explorer 11.0
3. Firefox
4. Safari 6.0
Apa yang dimaksud dengna properti borderImageSource Style DOM pada HTML?
BalasHapusProperti borderImageSource Style DOM pada HTML digunakan untuk menentukan jalur ke gambar yang akan digunakan sebagai berbatasan atau bukan berbatasan normal dari sekitar elemen yang dikenai oleh properti tersebut.
HapusJuga, jika nilai yang digunakan pada properti borderImageSource adalah "none", atau jika nilai gambar tidak dapat ditampilkan pada layar monitor, maka style batas yang akan digunakan untuk menggantikan properti borderImageSource.
Hapus