JS控制CSS3,添加浏览器兼容前缀

不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容。比如:

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>

采用类似于能力检测的方式,找到对应浏览器内核支持的前缀。然后按照规则修改属性,添加前缀。

上一篇:RISC-V开发工具 | 使用CDS进行RISC-V硬件平台的开发和调试


下一篇:Java集合框架中的快速失败(fail—fast)机制