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>
采用类似于能力检测的方式,找到对应浏览器内核支持的前缀。然后按照规则修改属性,添加前缀。
JS控制CSS3,添加浏览器兼容前缀的更多相关文章
- css自动添加浏览器兼容前缀 autoprefixer设置
Autoprefixer设置: preferences>key Bindings-Users {"keys":["ctrl+alt+x"],"c ...
- webpack3中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容
1.在webpack中需要处理css必须先安装如下两个loader npm install --save-dev css-loader style-loader 2.要处理sass和添加浏览器前缀需要 ...
- CSS3常用属性浏览器兼容前缀
1.检测网站https://gsnedders.html5.org/outliner/ 2.查询是否支持前缀http://caniuse.com 3.border-radius\box-shadow\ ...
- vue打包添加样式兼容前缀
在ios8 版本上的h5对flex的支持不太好,需要有兼容的写法. vue-cli自带了postCss autoprefixer 进行兼容处理,配置如下 在vue-loader.config.js中开 ...
- js快速判断IE浏览器(兼容IE10与IE11)
在很多时候,我们一般采用navigator.userAgent和正则表达来判断IE浏览器版本,下面介绍用IE浏览器中不同特性来判断IE浏览器 1 判断IE浏览器与非IE 浏览器 IE浏览器与非IE ...
- Js控制Div在浏览器中的高度
//需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...
- js iframe onload &line-height浏览器兼容问题
1.IE iframe onload事件 在IE下给iframe添加onload事件经常无效,因为在IE下它最多只能被激活一次,而且无论你有多少个iframe,被激活的也只能是最后一个的.可以用下面的 ...
- js Date()日期函数浏览器兼容问题解决方法
一般 直接new Date() 是不会出现兼容性问题的,而 new Date(datetimeformatstring) 常常会出现浏览器兼容性问题,为什么,datetimeformatstring中 ...
- 针对css3特性浏览器兼容 封装less
//--------------------------------------------------- // LESS Prefixer //--------------------------- ...
随机推荐
- 被深信服上网行为管理器AC拒绝的操作如何正常访问
1.管理员登入帐号 2.如下图,在菜单[实时状态]-[上网行为监控]中,搜索指定IP的行为记录,找到被拒绝的数据 3.如下图,在菜单[系统管理]-[全局排除地址]中,增加不过滤的地址并提交即可
- Jquery 组 tbale表格筛选
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- OA与BPM的区别
BPM OA 软件架构 JAVA..NET.基于SOA架构 JAVA..NET.PHP.Domino 驱动模式 流程驱动 文档驱动 交互 人与人,人与系统,系统与系统 人与人 软件功能 ...
- Django admin 一些有用的设置
Django自带的后台管理是Django明显特色之一,可以让我们快速便捷管理数据.后台管理可以在各个app的admin.py文件中进行控制.以下是我最近摸索总结出比较实用的配置.若你有什么比较好的 ...
- apache2.4.29安装脚本
#!/bin/bash . /etc/init.d/functions yum install -y expat-devel gcc gcc-c++ zlib-devel openssl-devel ...
- AT2364 Colorful Balls
AT2364 Colorful Balls 题意翻译 N个球排成一排,第i个球有颜色ci和重量wi. Snuke每次可以选择两个颜色相同,且重量之和不超过X的球,交换他们的位置. Snuke每次可以选 ...
- BZOJ5338[TJOI2018]xor——主席树+dfs序
题目描述 现在有一颗以1为根节点的由n个节点组成的树,树上每个节点上都有一个权值vi. 现在有Q 次操作,操作如下: 1 x y 查询节点x的子树中与y异或结果的最大值 2 x y z ...
- BZOJ2351[BeiJing2011]Matrix——二维hash
题目描述 给定一个M行N列的01矩阵,以及Q个A行B列的01矩阵,你需要求出这Q个矩阵哪些在原矩阵中出现过.所谓01矩阵,就是矩阵中所有元素不是0就是1. 输入 输入文件的第一行为M.N.A.B,参见 ...
- ECMAScript 6 -- let和const命令
ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. for (let i = 0; i ; i++) {console.log(i);} ...
- I/O多路复用详解
要想完全理解I/O多路复用,需先要了解I/O模型: 一.五种I/O模型 1.阻塞I/O模型 最流行的I/O模型是阻塞I/O模型,缺省情形下,所有套接口都是阻塞的.我们以数据报套接口为例来讲解此模型(我 ...