//非行间样式函数
<!doctype html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Document</title>
???<style>
???????* {
???????????text-align: center;
???????}
???</style>
</head>
<body>
<input type="button" value="style" id="btn"/>
<div id="div1">你好</div>
<!--//获取非行间css样式的函数-->
<script>
???function getStyle(obj, attr) {//获取非行间样式，obj是对象，attr是值
???????if (obj.currentStyle) {//针对ie获取非行间样式
???????????return obj.currentStyle[attr];
???????} else {
???????????return getComputedStyle(obj, false)[attr];//针对非ie
???????}
???}
???//为对象写入/获取css样式
???function css(obj, attr, value) {//对象，样式，值，传两个参数的时候为获取样式，3个是设置样式
???????if (arguments.length == 2) {
???????????return getStyle(obj, attr)
???????} else {
???????????if (arguments.length == 3) {
???????????????obj.style[attr] = value;
???????????}
???????}
???}
???window.onload = function () {
???????var oDiv = document.getElementById(‘div1‘);
???????var oBtn = document.getElementById(‘btn‘);
???????oBtn.onclick = function () {
???????????alert(getStyle(oDiv, ‘height‘));
???????????css(oDiv, ‘background‘, ‘green‘);
???????????alert(css(oDiv, "width"));
???????}
???}
</script>
</body>
</html>
//多物体动画（含透明度的动画）
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>多物体复杂运动带透明度</title>
???<style>
??????*{
??????????margin:0;
??????????padding:0;
??????????font-size:12px;
??????}
???????table {
???????????border-collapse: collapse;
???????????border-spacing: 0;
???????}
???????fieldset, img {
???????????border: 0
???????}
???????address, caption, cite, code, dfn, em, strong, th, var {
???????????font-style: normal;
???????????font-weight: normal
???????}
???????ol, ul {
???????????list-style: none
???????}
???????caption, th, td {
???????????text-align: center
???????}
???????h1, h2, h3, h4, h5, h6 {
???????????font-size: 100%;
???????????font-weight: normal
???????}
???????q:before, q:after {
???????????content: ‘‘
???????}
???????abbr, acronym {
???????????border: 0
???????}
???????.odiv {
???????????position: relative;
???????}
???????.odiv ul li {
???????????width: 200px;
???????????height: 100px;
???????????background: yellow;
???????????margin-bottom: 20px;
???????????border: 2px solid #000;
???????}
???????#li1 {
???????????opacity: 0.3;
???????????filter: alpha(opacity:30);
???????}
???</style>
</head>
<body>
<div id="odiv" class="odiv">
???<ul>
???????<li id="li1"></li>
???????<li id="li2"></li>
???????<li id="li3"></li>
???</ul>
</div>
<script>
???window.onload= function () {
???????var li1=document.getElementById(‘li1‘);
???????var li2=document.getElementById(‘li2‘);
???????var li3=document.getElementById(‘li3‘);
???????li1.onmouseover= function () {
???????????startMov(this,100,‘opacity‘);
???????};
???????li1.onmouseout= function () {
???????????startMov(this,30,‘opacity‘)
???????};
???????li2.onmouseover=function(){
???????????startMov(this,200,‘height‘)
???????};
???????li2.onmouseout= function () {
???????????startMov(this,100,‘height‘)
???????};
???????li3.onmouseover= function () {
???????????startMov(this,400,‘width‘)
???????};
???????li3.onmouseout= function () {
???????????startMov(this,200,‘width‘)
???????};
????????//给当前的三个对象分别添加定时器timer
???????li1.timer=null;
???????li2.timer=null;
???????li3.timer=null;
???};
???//移入移出所触发的动画函数
???function startMov(obj,itarget,attr){
???????clearInterval(obj.timer);//执行前先清空当前的定时器
???????//再给当前对象添加定时器
???????obj.timer=setInterval(function () {
???????????var icur=0;
???????????if(attr==‘opacity‘){
???????????????icur=Math.round(parseFloat(getStyle(obj,attr))*100);//计算机在计算小数的时候往往是不准确的
???????????}else{
???????????????icur=parseInt(getStyle(obj,attr));
???????????}
???????????var speed=0;
???????????speed=(itarget-icur)/8;
???????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
???????????if(icur==itarget){
???????????????clearInterval(obj.timer);
???????????}else{
???????????????if(attr==‘opacity‘){
???????????????????obj.style.filter=‘alpha(opacity:‘+(icur+speed)+‘)‘;
???????????????????obj.style.opacity=(icur+speed)/100;
???????????????}else {
???????????????????obj.style[attr]=icur+speed+‘px‘;
???????????????}
???????????}
???????},30);
???}
???//获取非行间样式
???function getStyle(obj,attr){
???????if(obj.currentStyle){
???????????return obj.currentStyle[attr];
???????}else {
???????????return getComputedStyle(obj,false)[attr];
???????}
???}
</script>
</body>
</html>
获取非行间样式函数及多物体动画（原生js写法）
原文地址：http://www.cnblogs.com/johnny-cli/p/7661056.html