opacity--css + javascript兼容性代码
2024-09-29 22:35:59
css设置opacity
之前看了别人写了一段关于opacity的css代码，没深入理解就copy过来自己用了一段时间，现在重新拿出来又深入研究了一下。
.cla{
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity:;
/* Safari 1.x */
-khtml-opacity:;
/* Good browsers */
opacity:;
}
我们知道opacity在IE9+中是完全支持的。
| opacity | IE6 | IE7 | IE8 | IE9 | IE10 |
| NO | NO | NO | YES | YES |
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
这行代码是为了解决IE8滤镜的问题，这行代码经过测试仅在IE8,和IE9中起作用
-ms-filter |
IE6 | IE7 | IE8 | IE9 | IE10 |
| NO | NO | YES | YES | NO |
参考IE官网资料，可以看到Alpha Filter在IE9之后的版本就不在支持了，语法如下：
HTML STYLE=... >
"filter:progid:DXImageTransform.Microsoft.Alpha(sProperties)"Internet Explorer 5.5 or later Scripting .style.filter =
"progid:DXImageTransform.Microsoft.Alpha(sProperties)"Internet Explorer 5.5 or later
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);在IE浏览器版本支持情况如下：
| filter | IE6 | IE7 | IE8 | IE9 | IE10 |
| YES | YES | YES | YES | NO |
所以为了支持IE8及IE8之前的版本不支持opacity的问题，可以这样写：
.cla{
/* IE 5-8 */
filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* Good browsers */
opacity:;
}
接下来我们来看filter: alpha(opacity=50);
filter: alpha(opacity=50);在IE浏览器支持情况如下：
| filter | IE6 | IE7 | IE8 | IE9 | IE10 |
| YES | YES | YES | YES | NO |
可以看到，filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";和filter: alpha(opacity=50);在IE浏览器中支持情况是一样的。但是filter: alpha(opacity=50);这种语法我没有查到相关资料。
所以为了支持IE8及IE8之前的版本不支持opacity的问题，也可以这样写：
.cla{
/* IE 5-8 */
filter: alpha(opacity=50);
/* Good browsers */
opacity:;
}
接下来我们来看看怎么用JavaScript改变opacity的值:
var opacityValue = 0.5; // 值为0.5
myElement.style.opacity = opacityValue ; //Good browsers myElement.style.filter = "alpha(opacity=" + opacityValue*100 + ")"; // IE5-8 //下面这些情况可以不用考虑
myElement.style.MozOpacity = opacityValue ;
myElement.style.opacity = opacityValue ;
myElement.style.KhtmlOpacity = opacityValue ;
最新文章
- mac PHP配置
- Swift基础语法 、 元组（Tuple）
- 在C函数中保存状态：registry、reference和upvalues
- poj 1325 Machine Schedule 最小点覆盖
- System.Data.SQLite数据库简介
- github配置和git学习
- NSA Fuzzbunch分析与利用案例
- 浅谈Ajax 异步的几点细节
- 简单使用git和github来管理代码----配置与使用
- SpringBoot整合RabbitMQ-服务安装
- PAT B1020
- Gradle: Gradle Wrapper
- HDU6280 From Tree to Graph
- mybatis插入数据后返回自增的主键id
- use of objects can be less efficient than a procedural approach
- Java编程思想学习笔记——枚举类型
- 洛谷P2216 理想的正方形
- s12-day01-work02 python多级菜单展示
- js如何获取键盘高度
- eclipse如何优化构建的速度