DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Properti Filter Style DOM HTML dan Fungsinya

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()"


16 Value Properti Filter Style DOM pada HTML
Properti Filter Style DOM

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

Komentar

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

    BalasHapus
    Balasan
    1. 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. Apa yang dimaksud dengan filter style dom pada HTML?

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

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

      Hapus

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Enkapsulasi Java dan Fungsinya

Specifier %d dan %i Bahasa C dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

7 Paradigma Penelitian pada Statistika Penelitian

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas