Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Tranparansi Elemen HTML Menggunakan Opacity Style DOM

Properti Style opacity DOM pada HTML digunakan untuk mengatur level opacity dari suatu elemen. Level opacity mendefinisikan tingkat transparansi elemen dimana nilai 1 merepresentasikan tidak transparan, dan 0.5 merepresentasikan tingkat transparansi sebesar 50%, dan nilai 0 merepresentasikan transparansi sempurna. Properti opacity style juga digunakan untuk mengembalikan nilai opacity dari suatu elemen.

Sebelum memahami lebih dalam materi tentang Mengatur Tranparansi Elemen HTML Menggunakan Opacity Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Posisi Objek HTML Menggunakan objectPosition Style DOM [klik], objectFit Style HTML DOM dan Fungsinya [klik], dan Mengatur Lebar Minimal HTML Menggunakan minWidth Style DOM [klik].

Sintak:
  • digunakan untuk mengembalikan nilai properti opacity: object.style.opacity
  • digunakan untuk mengatur nilai properti opacity: object.style.opacity = "number|initial|inherit"

Property Values:
  • number: berfungsi untuk menentukan nilai opacity dengan rentang nilainya antara 0.0 hingga 1.0.
  • initial: berfungsi untuk mengatur nilai properti opacity ke nilai default-nya.
  • inherit: berfungsi untuk menerima nilai properti dari elemen parent.

Return Values: mengembalikan sebuah nilai string yang merepresentasikan nilai level opacity dari suatu elemen.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style opacity DOM

</title>

</head>

 

<body>

<center>

 

<h1 

style="color:green;">

Blog Elfan

</h1>

 

<h2>

Properti Style opacity DOM

</h2>

 

<div 

id="mm1">

Merupakan portal ilmu 

komputer.

</div>

 

<button 

type="button" 

onclick="Bon1s()">

set Decoration

</button>

 

<script>

function Bon1s() 

{

document.getElementById("mm1").style.opacity

= "0.3";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style opacity DOM

Merupakan portal ilmu komputer.


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style opacity DOM

</title>

 

<style>

#mn2 

{

width: 150px;

height: 40px;

background-color: green;

}

</style>

 

</head>

 

<body>

<center>

 

<h1 

style="color:green;">

Blog Elfan

</h1>

 

<h2>

Properti Style opacity DOM

</h2>

 

<div 

id="mn2" 

style="color:white">

Merupakan portal ilmu 

komputer.

</div>

 

<button 

type="button" 

onclick="Bon2s()">

change opacity

</button>

 

<script>

function Bon2s() 

{

document.getElementById("mn2").style.opacity

= "0";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style opacity DOM

Merupakan portal ilmu komputer.

Artikel ini didedikasikan kepada: Dahlia Kusuma Ramadhani Dewi Suryani, Davin Finanda Firzi Pradhani, Dea Septiana, Delima Trisna Pramudiptha Poeger, dan Della Octaria Hadi.

6 komentar untuk "Mengatur Tranparansi Elemen HTML Menggunakan Opacity Style DOM"

  1. Jenis browse apa saja yang biasa digunakan oleh seorang pengembang untuk mengaktifkan properti opacity Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut merupakan beberapa jenis browser yang biasa digunakan oleh seorang pengembang untuk mengaktifkan properti opacity Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Apple Safari

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

    BalasHapus
    Balasan
    1. Properti opacity style dom pada HTML merupakan properti yang digunakan untuk menetapkan atau mengembalikan tingkat opacity suatu elemen.

      Hapus
  3. Apa yang dimaksud dengan tingkat Opacity Suatu elemen pada properti Opacity style dom pada HTML?

    BalasHapus
    Balasan
    1. Tingkat opacity suatu elemen menggambarkan tingkat transpaansinya, dimana 1 menyatakan tidak transparan sama sekalli, 0,5 menyatakan transparan 50%, dan 0 menyatakan benar-benar transparan.

      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 -