                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

obj.style.attr和obj.style[attr]有什么區(qū)別嗎？為什么我用后者有效果，前者沒效果？

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Title</title>
? ?<style>
? ? ? ?*{
? ? ? ? ? ?margin:0;
? ? ? ? ? ?padding:0;
? ? ? ?}
? ? ? ?div{
? ? ? ? ? ?width:200px;
? ? ? ? ? ?height: 80px;
? ? ? ? ? ?background: red;
? ? ? ? ? ?margin-bottom: 20px;
? ? ? ? ? ?border: 4px solid black;
? ? ? ? ? ?opacity: 0.3;
? ? ? ? ? ?filter: alpha(opacity:30);
? ? ? ?}
? ?</style>
? ?<script>
? ? ? ?window.onload=function(){
? ? ? ? ? ?var Li = document.getElementsByTagName("div")[0];
? ? ? ? ? ? ? ? ? ?Li.onmouseover = function(){
? ? ? ? ? ? ? ? ? ? ? ?startMove(this,'opacity',100)
? ? ? ? ? ? ? ? ? ?};
? ? ? ? ? ? ? ? ? ?Li.onmouseout = function() {
? ? ? ? ? ? ? ? ? ? ? ?startMove(this, 'opacity', 30);
? ? ? ? ? ? ? ? ? ?};
? ? ? ? ? ?var timer = null;

? ? ? ? ? ?function startMove(obj,attr,target){
? ? ? ? ? ? ? ? ? ?clearInterval(timer);
? ? ? ? ? ? ? ? ? ?timer = setInterval(function(){
? ? ? ? ? ? ? ? ? ?var icur = 0;
? ? ? ? ? ? ? ? ? ? ? ?if(attr == 'opacity'){
? ? ? ? ? ? ? ? ? ? ? ? ? ?icur = parseFloat(getStyle(obj,attr))*100;
? ? ? ? ? ? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? ? ? ? ? ?icur = parseInt(getStyle(obj,attr));
? ? ? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ?var speed = (target - icur)/8;
? ? ? ? ? ? ? ? ? ? ? ?speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
? ? ? ? ? ? ? ? ? ?if(icur == target){
? ? ? ? ? ? ? ? ? ? ? ?clearInterval(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>
</head>
<body>

<div></div>

</body>
</html>