Mengatur Daftar Gambar HTML Menggunakan listStyleImage Style DOM
Sintak:
- digunakan untuk mengembalikan nilai properti listStyleImage: object.style.listStyleImage
- digunakan untuk mengatur nilai properti listStyleImage: object.style.listStyleImage = "none|url|initial|inherit"
Properti Values:
- none: digunakan untuk tidak mengembalikan nilai gambar apapun atau tidak menampilkan nilai gambar apapun pada browser.
- url: digunakan untuk menentukan path dari suatu gambar.
- initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.
Return Values: berfungsi untuk mengembalikan sebuah string, yang merepresentasikan lokasi path dari gambar.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style listStyleImage
DOM pada HTML
</title>
</head>
<body>
<h1>
<center>
Bons
<button
onclick="image()">
Press
</button>
</center>
</h1>
<h4>
Klik tombol 'Press' untuk
memperlihatkan properti
ListStyleImage.
</h4>
<ul id="nnn1">
<li>M</li>
<li>A</li>
<li>K</li>
<li>A</li>
<li>N</li>
</ul>
<script>
function image()
{
// Pengaturan list style
// menjadi "none".
document.getElementById(
"nnn1").style.listStyleImage =
"none";
}
</script>
</body>
</html>
Bons
Klik tombol 'Press' untuk memperlihatkan properti ListStyleImage.
- M
- A
- K
- A
- N
Contoh: penggunaan properti url.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style listStyleImage
DOM pada HTML
</title>
</head>
<body>
<h1>
<center>
Bons
<button
onclick="image()">
Press
</button>
</center>
</h1>
<h4>
Klik tombol 'Press' untuk
memperlihatkan properti
ListStyleImage.
</h4>
<ul id="kkk2">
<li>M</li>
<li>A</li>
<li>K</li>
<li>A</li>
<li>N</li>
</ul>
<script>
function image()
{
// Pengaturan list style image
// menggunakan URL.
document.getElementById(
"kkk2").style.listStyleImage =
"url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp')";
}
</script>
</body>
</html>
Bons
Klik tombol 'Press' untuk memperlihatkan properti ListStyleImage.
- M
- A
- K
- A
- N
Contoh: penggunaan properti initial.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style listStyleImage
DOM pada HTML
</title>
</head>
<body>
<h1>
<center>
Bons
<button
onclick="image()">
Press
</button>
</center>
</h1>
<h4>
Klik tombol 'Press' untuk
memperlihatkan properti
ListStyleImage.
</h4>
<ul id="qqq3">
<li>M</li>
<li>A</li>
<li>K</li>
<li>A</li>
<li>N</li>
</ul>
<script>
function image()
{
// Pengaturan list style
// initial.
document.getElementById(
"qqq3").style.listStyleImage =
"initial";
}
</script>
</body>
</html>
Bons
Klik tombol 'Press' untuk memperlihatkan properti ListStyleImage.
- M
- A
- K
- A
- N
Contoh: Penggunaan properti inherit.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style listStyleImage
DOM pada HTML
</title>
</head>
<body>
<h1>
<center>
Bons
<button
onclick="image()">
Press
</button>
</center>
</h1>
<h4>
Klik tombol 'Press' untuk
memperlihatkan properti
ListStyleImage.
</h4>
<ul id="jjj4">
<li>M</li>
<li>A</li>
<li>K</li>
<li>A</li>
<li>N</li>
</ul>
<script>
function image()
{
// Pengaturan list style
// inherit.
document.getElementById(
"jjj4").style.listStyleImage =
"inherit";
}
</script>
</body>
</html>
Bons
Klik tombol 'Press' untuk memperlihatkan properti ListStyleImage.
- M
- A
- K
- A
- N
- 5 Value Properti marginLeft Style DOM pada HTML
- 5 Value Properti marginRight Style DOM pada HTML
- 5 Contoh Properti marginTop Style DOM pada HTML
- 5 Value Properti maxHeight Style DOM pada HTML
- 5 Value Properti maxWidth Style DOM pada HTML
- 4 Value Properti minHeight Style DOM pada HTML
- 4 Value Properti minWidth Style DOM pada HTML
5 komentar untuk "Mengatur Daftar Gambar HTML Menggunakan listStyleImage Style 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 oleh para pengembang untuk menggunakan properti listStyleImage DOM pada HTML?
BalasHapusBerikut adalah beberapa daftar jenis browser yang dapat digunakan oleh para pengembang untuk mengatifkan properti listStyleImage DOM pada dokumen HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti listStyleImage DOM pada HTML?
BalasHapusProperti listStyleImage Style DOM pada HTML merupakan properti yang digunakan untuk menggantikan penanda dari list-item dengan gambar.
HapusSelalu tentukan properti listStyleType sebagai sebuah tambahan dimana properti listStyleImage dapat digunakan jika gambar yang digunakan untuk ditampilkan karena alasan tertentu menjadi tidak tersedia.
Hapus