opacity--css + javascript兼容性代码
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 <ELEMENTSTYLE=
... >
"filter:progid:DXImageTransform.Microsoft.Alpha(sProperties)"Internet Explorer 5.5 or later Scripting object.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 ;
opacity--css + javascript兼容性代码的更多相关文章
- div+css通用兼容性代码整理
一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...
- html/css/javascript练习代码
这两天心血来潮学习了前端,自己也做了个小小的网页,不好看QAQ 不过网页上集结了很多零碎的知识,在这里先马克一下.图片地址:https://github.com/lesroad/html-css-js ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...
- IE和Firefox的Javascript兼容性总结
长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...
- 【总结】IE和Firefox的Javascript兼容性总结(转)
文章转自:http://www.cnblogs.com/wiky/archive/2010/01/09/IE-and-Firefox-Javascript-compatibility.html 长久以 ...
- [ 兼容 ] IE和Firefox的Javascript兼容性总结
长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...
- 记录下项目中常用到的JavaScript/JQuery代码二(大量实例)
记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...
随机推荐
- Y2分班考试 笔试题总结
1. 此题编译错误 base无法点出methodB()方法 2. 第二题选C 3.此题选D:正确的输出级别为fatal>error>warn>info>debug 4. 此题 ...
- LeetCode 100 及 101题
100. 相同的树 给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入: 1 1 / \ / \ 2 3 2 3 [ ...
- 【R语言进行数据挖掘】决策树和随机森林
1.使用包party建立决策树 这一节学习使用包party里面的函数ctree()为数据集iris建立一个决策树.属性Sepal.Length(萼片长度).Sepal.Width(萼片宽度).Peta ...
- 【Web应用-迁移】迁移 Web 应用到新的应用服务计划的相关限制和说明
现象描述 当前 Web 应用所在的应用服务计划和目标应用服务计划属于同一个资源组,但是通过 Portal 点击 “更改应用服务计划”,依旧看不到目标应用服务计划. 问题分析 导致上述问题的原因是,用户 ...
- 利用基于@AspectJ的AOP实现权限控制
一. AOP与@AspectJ AOP 是 Aspect Oriented Programming 的缩写,意思是面向方面的编程.我们在系统开发中可以提取出很多共性的东西作为一个 Aspect,可以理 ...
- java代码(生成long类型数字)
package test; public class GenerateNum { public static void main(String[] args) { //定义为long类型,需在数值后面 ...
- 机器学习(1)- 概述&线性回归&逻辑回归&正则化
根据Andrew Ng在斯坦福的<机器学习>视频做笔记,已经通过李航<统计学习方法>获得的知识不赘述,仅列出提纲. 1 初识机器学习 1.1 监督学习(x,y) 分类(输出y是 ...
- 一个batch如何通过一个网络
一个batch下所有的图片一起经过整个网络,不是说一张图片经过网络后再让下一张进入网络,这样一个batch一起通过网络计算速度比一张一张这样快
- uaf-湖湘杯2016game_学习
0x00 分析程序 根据分析,我们可以得到以下重要数据结构 0x01 发现漏洞 1.在武器使用次数耗光后,程序会把存储该武器的堆块free,在free的时候没有清空指针,造成悬挂指针 2.commen ...
- JAVA web项目转客户端(nativefier)
1.环境:windows 2.下载node.js 3.安装mode.js;记住安装目录 4.命令行进入安装目录 5.执行语句: npm install nativefier –g 进行安装 6.新建空 ...