JS控制CSS3,添加浏览器兼容前缀
2017-09-21 16:39
357 查看
不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容。比如:
有时候,我们需要通过js动态控制css3属性,这时候就需要根据不同的浏览器添加不同的前缀。当然,我们也可以将所有的前缀全部设置,就像以下这种方式:
这种方式能够设置属性成功,但是看起来就不是很优雅。代码冗余,而且设置了很多无效的属性。这里可以通过以下的方式,给不同的浏览器加上合适的前缀。
采用类似于能力检测的方式,找到对应浏览器内核支持的前缀。然后按照规则修改属性,添加前缀。
div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }
有时候,我们需要通过js动态控制css3属性,这时候就需要根据不同的浏览器添加不同的前缀。当然,我们也可以将所有的前缀全部设置,就像以下这种方式:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>JS控制CSS3,添加浏览器兼容前缀</title> </head> <body> <div id="target" style="background: blue"> 测试 </div> </body> <script type="text/javascript"> var target = document.getElementById("target"); target.style.MozTransform = 'rotate(30deg)'; target.style.OTransform = 'rotate(30deg)'; target.style.msTransform = 'rotate(30deg)'; target.style.transform = 'rotate(30deg)'; target.style.webkitTransform = 'rotate(30deg)'; </script> </html>
这种方式能够设置属性成功,但是看起来就不是很优雅。代码冗余,而且设置了很多无效的属性。这里可以通过以下的方式,给不同的浏览器加上合适的前缀。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>JS控制CSS3,添加浏览器兼容前缀</title> </head> <body> <div id="target" style="background: blue"> 测试 </div> </body> <script type="text/javascript"> var elementStyle = document.createElement('div').style; var vendor = (function(){ var transformNames = { webkit: 'webkitTransform', Moz: 'MozTransform', O: 'OTransform', ms: 'msTransform', standard: 'transform' }; for (var key in transformNames) { if (elementStyle[transformNames[key]] !== undefined) { return key; } } return false; })(); function prefixStyle(style) { if (vendor === false) { return false; } if (vendor === 'standard') { return style; } return vendor + style.charAt(0).toUpperCase() + style.substr(1); } target.style[prefixStyle('transform')] = 'rotate(30deg)' </script> </html>
采用类似于能力检测的方式,找到对应浏览器内核支持的前缀。然后按照规则修改属性,添加前缀。
相关文章推荐
- CSS3免写前缀兼容各大浏览器的JS插件——prefixfree.min.js
- 四二、js操作DOM(dom)改变css3属性时封装方法使自动识别浏览器添加css3属性前缀
- 开发日记(2015.9.21):Js中clearInterval、window.onload失效 及 Js添加animation的浏览器兼容
- 兼容多数浏览器的js添加收藏夹脚本
- js控制 页面刷新,但滚动条位置不变 浏览器兼容
- js 给div 添加选区,类似windows桌面选区一样,兼容ie6、7、8、9、10、Firefox、Google、所有浏览器
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- 如何用js控制带有浏览器前缀标识符的css属性
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- 用JS 控制文字两行 ,展示省略号(兼容谷歌 IE等各大浏览器)
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- 【开发过程问题汇总系列】【JS控制 iframe跳转】兼容 FireFox和IE内核的浏览器
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- JS添加/绑定事件监听函数并传参数attachEvent和addEventListener兼容个浏览器
- 使用js获取到css3的兼容前缀
- 【CSS3】浏览器前缀兼容写法
- js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)
- js控制position:fiexd 浏览器定位 兼容个浏览器
- 通过js为元素添加多项样式,浏览器全兼容写法