如何降低CSS不透明度
How to decrease CSS opacity
我需要一个纯javascript函数,它可以找到HTML元素的当前不透明度,并将其降低10%。有没有有效的跨浏览器解决方案?
请不要使用像jQuery这样的JS框架(我有自己的原因,所以不要问为什么),谢谢。
带有IE变体
var style = document.getElementById(...).style;
if(browserIsIE) {
var regExpResult = /alpha'(opacity's*='s*('d*)'s*')/.exec(style.filter);
var opacity;
if(regExpResult && regExpResult.constructor == Array && regExpResult[1] && opacity = parseInt(regExpResult[1])) {
style.filter = "alpha(opacity = " + (opacity - 10) + ")";
} else {
style.filter = "alpha(opacity = 90)";
}
} else {
style.opacity = style.opacity=='' ? 0.9 : parseFloat(style.opacity)-0.1;
}
var style = document.getElementById(...).style;
style.opacity = style.opacity=='' ? 0.9 : parseFloat(style.opacity)-0.1;
我忘记了,可能需要手动将返回值强制转换为字符串。
到目前为止,我已经取得了这一进展。你能测试或微调一下吗?
function normOpacity(num,ie) {
num = parseFloat(num);
if(num<0) return 0;
if(num>1 && !ie) return 1;
if(num>100 && ie) return 100;
return num;
}
function changeOpacity(obj,diff) {
if(!obj) return;
if(!obj.filters) {
var gcs = document.defaultView.getComputedStyle(obj,null);
var op = parseFloat(gcs.getPropertyValue("opacity")) + diff;
return obj.style.opacity = normOpacity(op)+"";
}
if(!obj.style.zoom) obj.style.zoom = 1;
var op, al, dx = "DXImageTransform.Microsoft.";
try { al = obj.filters.item(dx+"Alpha"); } catch(e) {}
if(!al) try { al = obj.filters.item("Alpha"); } catch(e) {}
if(!al) {
var op = normOpacity(100+100*diff,true);
return obj.style.filter+= "progid:"+dx+"Alpha(opacity="+op+")";
}
try { op = al["Opacity"]; } catch(e) { op = 100; }
al["Opacity"] = normOpacity(parseInt(op)+100*diff,true)+"";
}
使用
changeOpacity(obj,-0.1); // opacity should be 10% lower, regardless the browser
相关文章:
- 在js中访问元素时不透明度和样式未定义,但在css中定义
- 使用CSS不透明度和Javascript在滚动时淡入淡出
- CSS不透明度转换;在动画过程中不考虑覆盖不透明度
- 如何使用这个jQuery来实现css的不透明度
- 使用CSS动画更改显示和不透明度
- 如果我通过javascript设置不透明度,CSS悬停事件将被取消
- AngularJS中的CSS不透明度动画
- 当选择元素上方的元素(不透明度:0.001)时,元素后面的 rails/css/突出显示文本
- 如何使用javascript和css为select中的选项设置不透明度
- CSS文本区域-为每条可见线提供不同的不透明度
- CSS/JS为简单的产品库切换缩略图不透明度
- CSS图像不透明度渐变与多个元素(类)
- 路径点,animate.css和滚动的不透明度问题
- 改变不透明度使用css过渡和香草JavaScript只工作时淡出
- 在setInterval内停止jQuery动画功能,并将css不透明度设置为0
- 用PHP改变CSS的不透明度
- CSS过渡不透明度不工作的元素有display:none,然后改变为display:block
- 不透明度的错误在最新版本的Chrome - CSS转换
- HTML不透明度属性vs CSS不透明度
- 在Famo.us中转换颜色(或非转换/不透明度CSS属性)的正确方式