Cara menggunakan style opacity javascript

I have a div with an id with opacity:0.75; and this shows the div on the screen with 0.75 opacity. When i want change the opacity with js it doesn't work - I used an alert to see the style.opacity value but the alert comes up blank. If i instead have ...style.opacity = "0.75"; in the js code it does work (onscreen the object looks 75% opaque like it should and the alert comes up with 0.75). Why is this?

label.style.opacity = parseFloat(label.style.opacity, 10) - 0.1; alert(label.style.opacity);

and css

#label {
width:100px;
text-align:center;
height:50px;
font-size:normal;
position:absolute;
color:white;
z-index:100;
font-family:Helvetica-Light;
}

asked Jun 30, 2013 at 1:10

1

Try this:

label.style.opacity = (parseFloat(label.style.opacity) || 1) - 0.1;

If the element does not have a set value for the opacity property, .style.opacity will return an empty string. My code default the value to 1.

answered Jun 30, 2013 at 1:28

Šime VidasŠime Vidas

176k60 gold badges279 silver badges376 bronze badges

2

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent.

Set the opacity of an element using .opacity-{value} utilities.

<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>

Utilities API

Opacity utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

    "opacity": (
      property: opacity,
      values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      )
    ),
    

Contoh

Mengatur tingkat opacity untuk <div> elemen:

div {
    opacity: 0.5;
}

Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Properti opacity menetapkan tingkat opacity untuk elemen.

The opacity tingkat menggambarkan transparansi tingkat, di mana 1 tidak transparan sama sekali, 0,5 adalah 50% tembus, dan 0 adalah benar-benar transparan.

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Catatan: IE8 dan versi sebelumnya mendukung alternatif, properti filter. Seperti: filter:Alpha(opacity=50) .

CSS Syntax

opacity:number|initial|inherit;

Nilai properti

Contoh lebih

Contoh

Cara menggunakan JavaScript untuk mengubah opacity untuk elemen:

function myFunction(x) {
// Return the text of the selected option
    var opacity = x.options[x.selectedIndex].text;
    var el = document.getElementById("p1");
    if (el.style.opacity !== undefined) {
        el.style.opacity = opacity;
    } else {
        alert("Your browser doesn't support this example!");
    }
}

Cobalah sendiri "

Pages terkait

CSS tutorial: CSS Gambar Opacity / Transparency

Referensi HTML DOM: opacity property