                        課程
                    
                        /前端開發
                        
                            /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>