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

Properti Filter Style DOM HTML dan Fungsinya

Dipublikasikan Oleh: elfanmauludi 5 komentar
Pada artikel ini akan dijelaskan cara menggunakan properti filter style DOM pada HTML beserta penjelasan fungsi-fungsinya.


Sebelum memahami lebih dalam materi tentang Properti Filter Style DOM HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Mengatur Sel Kosong HTML Menggunakan emptyCells Style DOM, Properti Display Style DOM HTML dan Fungsinya, dan Mengatur Arah HTML Menggunakan Direction Style DOM.

Properti filter Style DOM pada HTML merupakan properti yang digunakan untuk menambahkan efek visual atau efek filter ke gambar pada dokumen HTML.

Sintak:
  • Mengembalikan nilai properti filter: object.style.filter
  • Mengatur nilai properti filter: object.style.filter = "none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()"

Value Property:
  • none: mengatur nilai efek ke none.
  • blur: mengatur nilai efek ke blur.
  • brightness(%): mengatur nilai kecerahan.
  • contrast(%): mengatur nilai kontras gambar.
  • drop-shadow: mengatur nilai efek bayangan yang jatuh ke gambar.
  • h-shadow: mengatur nilai horizontal bayangan.
  • v-shadow: mengatur nilai vertikal bayangan.
  • blur: mengatur nilai efek blur dalam satuan piksel.
  • spread: mengatur gambar untuk membesar atau meluas.
  • color: menambahkan nilai warna ke bayangan.
  • grayscale(%): mengatur gambar ke grayscale.
  • hue-rotate(deg): mengatur nilai rotasi hue pada gambar.
  • invert(%): melakukan invert pada gambar.
  • opacity(%): mengatur nilai level opacity pada gambar.
  • saturate(%): mengatur nilai saturasi gambar.
  • sepia(%): mengatur gambar untuk memiliki efek sepia.

Return Value: berfungsi untuk mengembalikan nilai gambar dengan penambahan efek visual.

Baca Juga:

Contoh: mengatur nilai properti filter ke Grayscale.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style filter DOM HTML

</title>

 

<style>

h1 

{

color: green;

}

</style>

 

</head>

 

<body>

<center>

 

<h1>

Blog Elfan

</h1>

 

<button 

onclick="img()">

Press

</button>

 

<h4>

Klik tombol 'Press' untuk 

mengatur filter properti ke 

grayscale.

</h4>

 

<img 

id="MNN1" 

src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"

alt="Mountain View" 

width="300" 

height="250">

<script>

 

function img() 

{

document.getElementById(

"MNN1").style.filter = "grayscale(100%)";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Klik tombol 'Press' untuk mengatur filter properti ke grayscale.

Mountain View


Contoh: mengatur nilai properti filter ke Opacity.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style filter DOM HTML

</title>

 

<style>

h1 

{

color: green;

}

</style>

 

</head>

 

<body>

<center>

 

<h1>

Blog Elfan

</h1>

 

<button 

onclick="img()">

Press

</button>

 

<h4>

Klik tombol 'Press' untuk 

mengatur filter properti ke 

Opacity.

</h4>

 

<img 

id="MKN2" 

src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"

alt="Mountain View" 

width="300" 

height="250">

 

<script>

function img() 

{

document.getElementById(

"MKN2").style.filter = "opacity(50%)";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Klik tombol 'Press' untuk mengatur filter properti ke Opacity.

Mountain View


Contoh: mengatur nilai properti filter ke invert.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style filter DOM HTML

</title>

 

<style>

h1 

{

color: green;

}

</style>

 

</head>

 

<body>

<center>

 

<h1>

Blog Elfan

</h1>

 

<button 

onclick="img()">

Press

</button>

 

<h4>

Klik tombol 'Press' untuk 

mengubah filter properti ke 

invert.

</h4>

 

<img 

id="mdn3" 

src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"

alt="Mountain View" 

width="300" 

height="250">

 

<script>

function img() 

{

document.getElementById(

"mdn3").style.filter = "invert(100%)";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Klik tombol 'Press' untuk mengubah filter properti ke invert.

Mountain View

Artikel ini didedikasikan kepada: Risa Devi Anjaini, Riska Setiani, Risma Nur Mazida, Risna Kurniasari, dan Rizal Rafly Mardiansyah.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Properti Filter Style DOM HTML dan Fungsinya"

  1. AnonimSenin, 04 Juli 2022 pukul 07.43.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimSenin, 04 Juli 2022 pukul 07.44.00 WIB

      Berikut adalah beberapa jenis browser yang biasa digunakan untuk mengaktifkan properti filter Style DOM pada HTML:
      1. Google Chrome 53.0
      2. Internet Explorer 13.0
      3. Firefox 35.0
      4. Opera 40.0
      5. Safari 9.1

      Hapus
  2. AnonimMinggu, 07 Agustus 2022 pukul 21.36.00 WIB

    Apa yang dimaksud dengan filter style dom pada HTML?

    BalasHapus
    Balasan
    1. AnonimMinggu, 07 Agustus 2022 pukul 21.37.00 WIB

      Properti style filter DOM pada HTML digunakan untuk mendefinisikan efek visual pada suatu elemen.

      Hapus
    2. AnonimMinggu, 07 Agustus 2022 pukul 21.38.00 WIB

      Properti style filter DOM pada HTML digunakan untuk menambahkan efek visual atau efek filter ke gambar yang terdapat pada dokumen html.

      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 -