Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Daftar Gambar HTML Menggunakan listStyleImage Style DOM

Properti listStyleImage Style DOM pada HTML digunakan untuk mengatur atau mengembalikan image sebagai icon list-item.

4 Value Properti listStyleImage Style DOM pada HTML
Properti listStyleImage DOM HTML

Sebelum memahami lebih dalam materi tentang Mengatur Daftar Gambar HTML Menggunakan listStyleImage Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Daftar HTML Menggunakan listStyle DOM [klik], Mengatur Panjang Jarak HTML Menggunakan lineHeight Style DOM [klik], dan Mengatur Spasi Kertas HTML Menggunakan letterSpacing Style DOM [klik].

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.

Baca Juga:

Contoh: penggunaan properti none.

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

Output:

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>

Output:

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>

Output:

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>

Output:

Bons

Klik tombol 'Press' untuk memperlihatkan properti ListStyleImage.

  • M
  • A
  • K
  • A
  • N

Artikel ini didedikasikan kepada: Ariska Dwi Kusumaningrum, Armalina Safana Jazuliah, Arnita Febriyanti, Arya Dewa Saputra, dan Asri Lita Sari.

5 komentar untuk "Mengatur Daftar Gambar HTML Menggunakan listStyleImage Style DOM"

  1. Jenis browser apa saja yang dapat digunakan oleh para pengembang untuk menggunakan properti listStyleImage DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa daftar jenis browser yang dapat digunakan oleh para pengembang untuk mengatifkan properti listStyleImage DOM pada dokumen HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Safari

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

    BalasHapus
    Balasan
    1. Properti listStyleImage Style DOM pada HTML merupakan properti yang digunakan untuk menggantikan penanda dari list-item dengan gambar.

      Hapus
    2. Selalu tentukan properti listStyleType sebagai sebuah tambahan dimana properti listStyleImage dapat digunakan jika gambar yang digunakan untuk ditampilkan karena alasan tertentu menjadi tidak tersedia.

      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 -