Skip to content

December 11, 2009

Setting opacity of html element using Javascript

Kamu pasti pernah efek blur dari elemen html sepert table, div dan lainnya, dimana opacity elemen ini perlahan berubah menjadi transparan atau opaque. Ini bisa dilakukan lewat Javascript .

Kode berikut ini bisa digunakan untuk mengatur opacity di IE.

var opacityValue = 0.5; //make it 50% opaque
myElement.style.filter = “alpha(opacity=” + opacityValue*100 + “)”; // IE

Tapi kode diatas tidak akan bisa jalan di browser lain seperti, Firefox, Opera, dll. Firefox mendukung properti CSS yang lain yang disebut opacity, yang mengontrol opacity sebuah elemen. Javascript berikut ini akan mengatur opacity dari macam2 elemen html tidak tergantung pada jenis browser nya.

function setOpacity (myElement, opacityValue) {

if (window.ActiveXObject) {

myElement.style.filter = “alpha(opacity=”

+ opacityValue*100 + “)”; // IE

else {

myElement.style.opacity = opacityValue; // Gecko/Opera

}

}