如何用javascript获取和设置css3属性

==================获取========================

我想到的第一个思路

var test = document.getElementById('test');
console.log(test.style);

然而这种方法并没有什么效果,因为style代表的是行间样式。

我突然想起以前学JS运动,有一个叫做getStyle的方法

function getStyle(obj, name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj, false)[name];
}
}

这个方法用兼容的方式来获得元素的CSS属性

如果我们把这个方法的name去掉,就可以获得所有的CSS属性集合

function getFullStyle(obj){
if(obj.currentStyle){
return obj.currentStyle;
}else{
return getComputedStyle(obj, false);
}
}

这样我们就可以获得所有属性了。

如果是CSS3的属性,通常都是以webkit开头的,只要按照字母顺序找到w开头的属性就好了。

总结一下

function getStyle(obj, name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj, false)[name];
}
} function getFullStyle(obj){
if(obj.currentStyle){
return obj.currentStyle;
}else{
return getComputedStyle(obj, false);
}
}

这两个方法可以放在自己的库里随时随地调用。

=============================设置=====================

至于设置,我们还是要通过行间样式来设置,我们可以先看下style里都有啥

var test = document.getElementById('test');
console.log(test.style);

比如animation-name这个属性,在style里叫animationName,所以设置的时候直接这样设置就好了

test.style.animationName = 'show';

==================用jQuery获取和设置CSS3属性=================

jQuery只能使用css()方法来获取指定的css属性,设置的话只能使用attr来设置,而且还不如原生javascript的style好用。

最后把我写的测试demo贴一下

<!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>getCSS3</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.test{
width: 500px;
height: 500px;
position: absolute;
left: 200px;
top: 50px;
background: red;
-webkit-animation: rotate 8s linear infinite both;
border-radius: 30px;
box-shadow: 0 0 10px #000;
} @-webkit-keyframes rotate{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
} @-webkit-keyframes show{
0%{height: 0px;}
100%{height: 500px;}
}
</style>
</head>
<body>
<div class="test" id="test"></div> <script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var test = document.getElementById('test');
console.log(getFullStyle(test));
console.log(getStyle(test,'animation-name')); console.log(test.style);
test.style.animationName = 'show'; function getStyle(obj, name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj, false)[name];
}
} function getFullStyle(obj){
if(obj.currentStyle){
return obj.currentStyle;
}else{
return getComputedStyle(obj, false);
}
}
</script>
</body>
</html>

===============2016年6月15日===============

原生JS也可以用setAttribute和getAttribute方法,但是这两种方法有很多兼容性问题。

另外还有createAttribute方法,可以做一些与众不同的事情。

上一篇:.NET Core开发日志——Filter


下一篇:PHP如何连接Access数据库