                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

js获取style属性值的问题

这节课里面老师说用obj.style.attr获取obj的属性attr，这种方法必须是在属性attr通过内嵌在标签里面才能读取到，是这个意思吗，比如：

<style type = "text/css">
div{
    width:200px;
    height:60px;
    background: yellow;
}
</style>
<script type = "text/javascript">
    var obj = document.getElementById("div1");
    obj_width = obj.style.width;
</script>
<body>
    <div id = "div1"></div>
</body>

按照老师的意思，是不是就是说，上面代码的obj_width = obj.style.width;
这句是无效的，获取不到div1的width值，因为js代码无法获取CSS里面的样式，只能获取内嵌在标签里面的CSS样式，所以如果想要以这种办法获取目标属性，必须把目标想要被获取的CSS属性写在这里面：<body><div id = "div1" style = "width:200px"></div></body>只有这样才能用obj.style.attr获取相应的属性呢？

但是在前一节课中，CSS定义在<style></style>里，用obj.style.attr还是能获取到相应的属性啊，为什么呢？好乱啊。。。

上一节课的代码，完全可以跑起来啊，并不会出现obj.type.attr获取不到CSS里面样式的情况，为什么呢？

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            filter:alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var aLi = document.getElementsByTagName('li')
            for(var i = 0; i<aLi.length; i++){
                aLi[i].timer = null;
                aLi[i].onmouseover = function () {
                    move(this,400);
                };
                aLi[i].onmouseout = function () {
                    move(this,200);
                }
            }
        };

        function move(obj,target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var speed = (target - obj.offsetWidth)/8;
                speed = speed>0? Math.ceil(speed):Math.floor(speed);
                if (obj.offsetWidth == target){
                    clearInterval(obj.timer);
                }else {
                    obj.style.width = obj.offsetWidth + speed + 'px';
                }
            },30)
        }
    </script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>