==================获取========================
我想到的第一个思路
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>
时间： 2024-10-07 05:55:35