js opacity0点击_javascript opacity兼容性随笔

一、CSS兼容代码

.transparent {

filter:alpha(opacity=50); /* IE */

-moz-opacity:0.5; /* FireFox old version*/

-khtml-opacity: 0.5; /* Sarfari old version */

opacity: 0.5; /* FireFox */

}

二、Javascript兼容代码

if (!window.jasen.core.Util) {

window.jasen.core.Util = {};

}

var $ = function (id) {

return document.getElementById(id);

}

function style(element, key, value) {

if (typeof element == "string") {

element = $(element);

}

if (value) {

element.style[key] = value;

}

else {

return element.style[key];

}

};

function opacity(element, /*0-100*/opacityValue) {

var opacityValue = parseInt(opacityValue);

style(element, "filter", "alpha(opacity=" + opacityValue + ")");

opacityValue /= 100.0;

style(element, "MozOpacity", opacityValue);

style(element, "KhtmlOpacity", opacityValue);

style(element, "opacity", opacityValue);

};

var Util = window.Util = window.jasen.core.Util;

Util.opacity = opacity;

Util.style = style;

三、范例

#content{width:300px;margin:20px auto;

}

window.οnlοad= function() {varseletor=document.getElementById("opacitySeletor");

seletor.options.add(newOption("--请选择--","100"));for(vari= 0; i<= 100; i++) {

seletor.options.add(newOption(i, i));

}

seletor.onmousewheel= function(event) {

event=event||window.event;varcurrentIndex=seletor.selectedIndex-event.wheelDelta/ 120;if(currentIndex< 0) {

seletor.selectedIndex=seletor.options.length- 1;

}else if(currentIndex>seletor.options.length- 1) {

seletor.selectedIndex= 0;

}else{

seletor.selectedIndex=currentIndex;

}

seletor.onchange();return false;

}

}functionchangeOpacity() {varelement=document.getElementById("opacitySeletor");if(element.selectedIndex< 0) {return;

}varopacityValue=element[element.selectedIndex].value;if(opacityValue!= "") {

Util.opacity("opacityImg", opacityValue);

}

}