Cara mengubah opacity di javascript

Question

Properti opacity Style di HTML DOM digunakan untuk menyetel level opacity untuk suatu elemen. Tingkat opacity mendefinisikan tingkat transparansi di mana nilai 1 mewakili tidak transparan, 0. 5 mewakili transparansi 50% dan 0 mewakili sepenuhnya transparan. Itu juga mengembalikan tingkat opacity dari suatu elemen

Table of Contents Show

Bagaimana cara mengatur opacity JavaScript?
Bagaimana cara memeriksa opasitas dalam JavaScript?
Bagaimana Anda mengubah tingkat opacity?
Apa gunanya opacity dalam JavaScript?

Sintaksis.

Ini mengembalikan properti opacity.

object.style.opacity

Ini digunakan untuk mengatur properti opacity.

object.style.opacity = "number|initial|inherit"

_

Nilai properti.

nomor. Ini menentukan nilai opacity dan berkisar dari 0. 0 sampai 1. 0
awal. Ini mengatur properti opacity ke nilai standarnya
mewarisi. Properti ini diwarisi dari elemen induknya

Nilai Pengembalian. Ini mengembalikan string yang mewakili tingkat opacity dari suatu elemen.

Contoh 1.

HTML

<!DOCTYPE html>

<html>

<head>

<

object.style.opacity = "number|initial|inherit"

1

object.style.opacity = "number|initial|inherit"

2

object.style.opacity = "number|initial|inherit"

1>

object.style.opacity = "number|initial|inherit"

5head>

<

object.style.opacity = "number|initial|inherit"

9>

<<!DOCTYPE html>3>

<!DOCTYPE html>5<<!DOCTYPE html>7 <!DOCTYPE html>8<!DOCTYPE html>9<0>

<2<3

<!DOCTYPE html>5

object.style.opacity = "number|initial|inherit"

5<!DOCTYPE html>7>

<!DOCTYPE html>5<html0

object.style.opacity = "number|initial|inherit"

2html0>

<!DOCTYPE html>5<html6 html7<!DOCTYPE html>9html9 <!DOCTYPE html>8<!DOCTYPE html>9

object.style.opacity = "number|initial|inherit"

63>

Jika Anda ingin kotak dan semua isi kotak diubah opasitasnya, maka properti CSS opacity adalah alat untuk meraihnya. Opacity adalah kebalikan dari transparansi;

Menggunakan nilai 0_ akan membuat kotak benar-benar transparan, dan nilai di antara keduanya akan mengubah opacity, dengan nilai yang lebih tinggi memberikan transparansi yang lebih sedikit

Dalam banyak kasus, Anda hanya ingin membuat warna latar belakang itu sendiri sebagian transparan, menjaga agar teks dan elemen lainnya sepenuhnya buram. Untuk mencapainya, gunakan nilai warna yang memiliki saluran alfa—seperti. Seperti opacity, nilai 1 untuk nilai saluran alfa membuat warna sepenuhnya buram. Oleh karena itu background-color: rgba(0,0,0,.5); akan mengatur warna latar belakang menjadi 50% opacity

Coba ubah nilai opacity dan alpha channel pada contoh di bawah ini untuk melihat lebih banyak atau lebih sedikit gambar latar belakang di balik kotak

Catatan. Berhati-hatilah agar teks Anda mempertahankan kontras yang cukup dengan latar belakang jika Anda melapisi gambar;

Properti opacity_ CSS mengatur opasitas elemen. Opasitas adalah sejauh mana konten di balik suatu elemen disembunyikan, dan kebalikan dari transparansi

opacity: 0.9;
opacity: 90%;

/* Global values */
opacity: inherit;
opacity: initial;
opacity: revert;
opacity: revert-layer;
opacity: unset;

<alpha-value>

A <number> dalam rentang

background: rgba(0, 0, 0, 0.4);

0 hingga

background: rgba(0, 0, 0, 0.4);

1, inklusif, atau

background: rgba(0, 0, 0, 0.4);

2 dalam rentang

background: rgba(0, 0, 0, 0.4);

3 hingga

background: rgba(0, 0, 0, 0.4);

4, inklusif, mewakili opasitas saluran (yaitu, nilai saluran alfa-nya). Setiap nilai di luar interval, meskipun valid, dijepit ke batas terdekat dalam rentang tersebut

NilaiArti

background: rgba(0, 0, 0, 0.4);

5Elemen ini sepenuhnya transparan (yaitu, tidak terlihat). Setiap <number> secara ketat antara

background: rgba(0, 0, 0, 0.4);

5 dan

background: rgba(0, 0, 0, 0.4);

8Elemen tembus cahaya (artinya, konten di balik elemen dapat dilihat).

background: rgba(0, 0, 0, 0.4);

8 (nilai default)Elemen sepenuhnya buram (padat secara visual)

opacity berlaku untuk elemen secara keseluruhan, termasuk isinya, meskipun nilainya tidak diwarisi oleh elemen turunan. Dengan demikian, elemen dan anak-anaknya semuanya memiliki opacity yang sama relatif terhadap latar belakang elemen, bahkan jika mereka memiliki opacity yang berbeda satu sama lain.

Menggunakan opacity dengan nilai selain

background: rgba(0, 0, 0, 0.4);

8 menempatkan elemen dalam konteks susun baru

Untuk mengubah opasitas latar belakang saja, gunakan properti

opacity = 
  <alpha-value>  

<alpha-value> = 
  <number>      |
  <percentage>

3 dengan

opacity = 
  <alpha-value>  

<alpha-value> = 
  <number>      |
  <percentage>

4 yang mengizinkan saluran alfa. Sebagai contoh

background: rgba(0, 0, 0, 0.4);

Jika opasitas teks disesuaikan, penting untuk memastikan bahwa rasio kontras antara warna teks dan latar belakang teks ditempatkan cukup tinggi sehingga orang yang mengalami kondisi penglihatan rendah akan dapat membaca konten halaman

Rasio kontras warna ditentukan dengan membandingkan luminositas teks yang disesuaikan opacity dan nilai warna latar belakang. Untuk memenuhi Pedoman Aksesibilitas Konten Web (WCAG) saat ini, rasio 4. 5. 1 diperlukan untuk konten teks dan 3. 1 untuk teks yang lebih besar seperti judul. Teks besar didefinisikan sebagai 18. 66px dan tebal atau lebih besar, atau 24px atau lebih besar

WebAIM. Pemeriksa Kontras Warna
Memahami Kriteria Sukses 1. 4. 3. W3C Memahami WCAG 2. 0

Nilai awal

background: rgba(0, 0, 0, 0.4);

8Berlaku untuk semua elemenInheritednoPercentagespeta ke rentang

opacity = 
  <alpha-value>  

<alpha-value> = 
  <number>      |
  <percentage>

6Nilai yang dihitungSama dengan nilai yang ditentukan setelah memotong <number> ke rentang [0. 0, 1. 0]. Jenis animasi menurut jenis nilai yang dihitung

opacity = 
  <alpha-value>  

<alpha-value> = 
  <number>      |
  <percentage>

Contoh berikut menunjukkan bagaimana properti opacity mengubah opasitas seluruh elemen dan konten, sehingga membuat teks sangat sulit dibaca

HTML

<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>

CSS

div {
  background-color: yellow;
  font-weight: bold;
  font-size: 130%;
}
.light {
  opacity: 0.2; /* Barely see the text over the background */
}
.medium {
  opacity: 0.5; /* See the text more clearly over the background */
}
.heavy {
  opacity: 0.9; /* See the text very clearly over the background */
}

Hasil

Dalam contoh berikut opacity diubah saat melayang, sehingga gambar latar bergaris pada elemen induk ditampilkan melalui gambar

Bagaimana cara mengatur opacity JavaScript?

Untuk mengubah opasitas Elemen HTML menggunakan JavaScript, dapatkan referensi ke elemen Elemen HTML, dan tetapkan nilai opasitas yang diperlukan ke elemen. gaya. properti opasitas . Nilai opacity berkisar dari 0 hingga 1.

Bagaimana cara memeriksa opasitas dalam JavaScript?

getElementById("em"); . getComputedStyle(em). getPropertyValue("opacity"); Sekarang, variabel temp akan memiliki nilai opacity "em".

Bagaimana Anda mengubah tingkat opacity?

Pilih layer yang diinginkan, lalu klik panah drop-down Opacity di bagian atas panel Layers. Klik dan seret penggeser untuk menyesuaikan opasitas . Anda akan melihat perubahan opacity layer di jendela dokumen saat Anda memindahkan slider. Jika Anda mengatur opacity menjadi 0%, layer akan menjadi benar-benar transparan, atau tidak terlihat.