XML/HTML代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/htmlcharset=utf-8″ />
<title>JS获取CSS属性值</title>
<style type=”text/css”>
<!–
.ss{color:#cdcdcd}
–>
</style>
</head>
<body>
<div id=”css88″ class=”ss” style=”width:200pxheight:200pxbackground:#333333″>JS获取CSS属性值</div>
<script type=”text/javascript”>
alert(document.getElementById(“css88”).style.width)//200px
alert(document.getElementById(“css88”).style.color)//空白
</script>
</body>
</html>
上面这个例子对id为”css88″的div设置了2种烦事的样式，包括style和外部样式class。
从alert出来的信息可以看到，document.getElementById(“css88”).style方法获取不到class为ss的属性和值。
IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法。
另外一个方法是：
XML/HTML代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/htmlcharset=utf-8″ />
<title>S获取CSS属性值</title>
<style type=”text/css”>
<!–
.ss{background:bluecolor:#cdcdcdwidth:200px}
–>
</style>
</head>
<body>
<p id=”qq” class=”ss” >sdf</p>
<script type=”text/javascript”>
function GetCurrentStyle (obj, prop) {
if (obj.currentStyle) {
return obj.currentStyle[prop]
}
else if (window.getComputedStyle) {
propprop = prop.replace (/([A-Z])/g, “-$1”)
propprop = prop.toLowerCase ()
return document.defaultView.getComputedStyle (obj,null)[prop]
}
return null
}
var dd=document.getElementById(“qq”)
alert(GetCurrentStyle(dd,”width”))
</script>
</body>
</html>
当然，如果您是引用外部的css文件同样适用。
另：可以将上面的方法简化为
JavaScript代码
function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]
}
在网页上右键菜单选择”查看源代码“，会出现新页面显示该网页源代码。一般js文件或css文件都在网页的头部<head>与</head>之间加载，为超链接形式，点击，会以新页面形式显示js文件或css文件的源代码，再右键菜单上选择”另存为“可以存到本地硬盘。也有js代码直接写在html源文件中的，直接选取复制，可粘贴到本地文件中去。CSS Animation Store这个主意是通过一个简单的接口来访问CSS动画，实际上之前的Morf.js和CSSA中都有这样的处理，大部分代码已经有了，只需要整整，按照Chris所建议的接口风格写下来
从GitHub下载CSS Animation Store
下面是CSS Animation Store的基本接口（关于代码如何工作的信息），将代码放在标签之前，会创建一个全局的对象 CSSAnimations，这个对象包含所有当前可以使用的CSS动画
比如，获取名称为”spin”的动画，你可以按下面的代码：
var spin = CSSAnimations.spin
参数spin是一个KeyframeAnimation实例，有下面的属性和函数：
keyframes – KeyframeRule 集合
original – 原始对象 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型
getKeyframeTexts() – 返回所有keyframe文本集合, e.g. [‘0%’, ‘50%’, ‘100%’]
getKeyframe(text) – 返回指定文字的 KeyframeRule 对象, e.g. getKeyframe(‘0%’)
setKeyframe(text, css) – 设置新的CSS, e.g.setKeyframe(‘10%’, {background: ‘red’, ‘font-size': ‘2em’})
可以看出，KeyframeRule提供了一些方法和函数，是对 WebKitCSSKeyframeRule 和MozCSSKeyframeRule （注意是frame不是frames）的封装，具有下面的属性和方法
css – 该keyframe的css内容, e.g. {background: ‘red’, ‘font-size': ‘2em’}
keyText – 该帧的名称, e.g. 10%
original – 原始对象 WebKitCSSKeyframeRule 或者MozCSSKeyframeRule
示例
获取动画中的所有帧
var spin = CSSAnimations.spin
for(var i=0i<spin.keyframes.lengthi++)
console.log(spin.keyframes[i].css)
修改动画中的某一帧
var spin = CSSAnimations.spin
spin.setKeyframe('10%', {background: 'red', 'font-size': '2em'})
反馈
给我博客或者GitHub留言，让我知道你的想法，我还开放了修改和增加的权限
使用原生JavaScript访问和创建CSS动画
如果你不想使用CSS Animation Store，或者只是想知道它的实现原理，可以参看下面的介绍
访问CSS动画
可以通过CSSOM访问keyframe动画，下面是我CSSA中的代码，用于访问指定的CSS动画
