关于CSS设置和获取元素不透明度的问题与解决方案

对于浏览器对元素不透明度度opacity的支持情况和如何设置,相信大家已经都熟悉了。这里就不再分析。

简单的,要支持主流浏览器需要同时设置IE特有的滤镜和W3C标准的opacity属性。

例如:设置不透明度为20%

    filter:alpha(opacity=20);

    opacity:0.2;

我需要重点分享的是CSS不透明度通过JS获取的问题。

首先,经过本人的大量有效分析测试得出:

    IE5 - IE8   只支持filter滤镜设置CSS不透明度,不支持opacity属性设置CSS不透明度

    IE9           既支持filter滤镜设置CSS不透明度,也支持opacity属性设置CSS不透明度

    IE10+       不支持filter滤镜设置CSS不透明度,只支持opacity属性设置CSS不透明度

    Firefox Chrome Safari Opera 不支持filter滤镜设置CSS不透明度,只支持opacity属性设置CSS不透明度

    IE9+ 支持currentStyle,也支持document.defaultView.getComputedStyle

    IE5 - IE8 支持currentStyle,不支持document.defaultView.getComputedStyle

    非IE 不支持currentStyle,只支持document.defaultView.getComputedStyle

    IE 支持获取CSS用户自定义的属性,但是只能通过访问currentStyle返回,而访问document.defaultView.getComputedStyle无法获得自定义属性

    非IE 不支持获取CSS自定义属性

所以,用JS获取不透明度属性的时候,因为默认的opacity属性值为1,但是IE8及其以下的版本不支持,所以会返回undefined,而其他支持该属性的浏览器返回1。

那么在如上面的例子中那样设置了不透明度为20%不透明,那么我们要通过IE支持的currentStyle来获取filter的值:alpha(opacity=20),在通过正则表达式得到数值20,再乘以0.01得到正确的值0.2,

对于非IE和支持opacity的浏览器,可以直接获取。

但是

这里有一个需要注意的地方就是,返回值的浮点数与设置值不相等的问题。

在Chrome Safari Opera这3大浏览器中,设置opacity:0.2,当我们用JS获取opacity值得时候返回的却不是0.2,而是一个约等于0.2的很长的浮点数,浏览器测试这时判断返回值是否等于0.2,得到false。

对于这个问题我没有找到原因,但是在这3大浏览器中测试确实存在,返回值与设置值有微量误差,本人猜测这也许与获取CSS的方式是通过计算后的样式,其中浏览器内部的浮点数运算存在误差的缘故。

所以可以用 0.01*Math.round(100*CSS.opacity) 方法处理返回值来得到正确的值。

在IE和Firefox中没有这样的问题,他们都返回设置的值。

以上就是本人的一点小小的经验,非常高兴和大家分享!

时间: 2024-12-20 02:18:26

关于CSS设置和获取元素不透明度的问题与解决方案的相关文章

jquery设置和获取元素的属性

jquery设置和获取元素的属性: 使用jquery可以方便的设置指定元素的属性,下面就以div元素为例子做一下简单介绍. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁

CSS设置行内元素和块级元素的水平居中、垂直居中

CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ PS:当然,如果既要水平居中又要垂直居中,那么综合一下 div{text-align:center; height:30px; line-height:30px} CSS设置块级元素的水平居中 div p{margin:0 auto; widt

根据id设置、获取元素的文本和value

/** * 根据id获取元素文本 * @param {String} id|元素id * return {Integer || String} text */function getText(id){ var text = $('#'+ id).text().replace(/(^\s*)|(\s*$)/g,""); if(text=='' || text==null){ return ''; } else if(!isNaN(text)){ var intText = parseIn

css设置时父元素随子元素margin值移动

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div class="box1"> <div class="box2"> <div class="content"> <div class="margin">123</div> &l

获取元素的css属性之getComputedStyle

习惯了用jQuery的css()的方法获取元素的css属性,突然不用jQquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?document.getElementById("id").style.width? 一.getComputedStyle getComputedStyle,见名之意,就是获取元素计算之后的样式属性值,也就是获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object C

jquery中获取元素的几种方式小结

1 从集合中通过指定的序号获取元素 html: 复制代码代码如下: <div> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </div> JS 复制代码代码如下: <script type

jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()

1. html()方法: 此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的html内容. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jQ

JS 获取元素对象/添加节点

一.设置或获取元素对象中(标签中)的属性和自定义属性 对象.属性 对象['属性'] 对象.getAttribute('属性名') 对象.setAttribute('属性名','属性值'); 对象.removeAttribute('属性名') 二.outerHTML : 当前节点对象及所有子节点(标签及所有内容) innerHTML : 当前节点中所有的内容(包含标签,会自动解析标签) innerText : 当前节点中所有的纯文本内容(不包含标签,不会自动解析标签) 三.如何获取所有的子节点?

获取元素CSS值之getComputedStyle方法熟悉

一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法. 对于那些只想混口饭吃的人来讲,晓得CSS()如何使用就足够了.对于希望在JS道路上越走越远的来人说,简单了解一些JS库底层实现对自己的学习很有帮助.可能谈不上信手拈来的使用,至少对创造一些创意新颖的新技术拓宽了思路. jQuery为何受欢迎,其中原因之一就是方法名称比较短.好比打架一样,块头大的潜意识认为厉害,就不由得心生畏惧,退避三舍:小个子(