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.

nilai default: mewarisi: animatable: Versi: sintaks JavaScript:

1

no

yes, see individual properties . Read about animatable Try it

CSS3

object .style.opacity="0.5" Try it

Dukungan Browser

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

Milik

opacity	4.0	9.0	2.0	3.1	9.0

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