CSSs width屬性和offsetwidth屬性深入理解

本文轉載自查看原文 2016-08-14 14:29 1513

本人菜鳥一枚，趁着奧運期間，一邊看奧運，一邊學習，最近在慕課網學習前端技術，學習過程中有向很多前輩們博客學習，現在就來分享我的學習所得。

慕課網，導航條菜單的制作，使用javascript去制作伸縮菜單（水平方向上），下面是學習過程中的一個小插曲：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>導航菜單</title>
<style type="text/css">
* { margin: 0; padding: 0; font-size: 14px; }
a { color: #333; text-decoration: none }
ul { list-style: none; height: 30px; border-bottom: 5px solid #F60; margin-top: 20px; padding-left: 50px; }
ul li { float: left }
ul li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }
a.on, a:hover { background: #F60; color: #fff; }
</style>
<script>
window.onload=function(){
    var aA=document.getElementsByTagName('a');
    for(var i=0; i<aA.length; i++){
        aA[i].onmouseover=function(){
            var This=this;
        
            This.time=setInterval(function(){
                    This.style.width=This.offsetWidth+8+"px";
                    if(This.width>=160"px")
                    clearInterval(This.time);
                },30)
        }
        aA[i].onmouseout=function(){
                clearInterval(this.time);
                var This=this;
                this.time=setInterval(function(){
                    This.style.width=This.offsetWidth-8+"px";
                    if(This.offsetWidth<=120){
                        This.style.width='120px';
                        clearInterval(This.time);
                    }
                },30)
        }
    }
}
</script>
</head>
<body>
<ul>
    <li><a class="on" href="#">首　　頁</a></li>
    <li><a href="#">新聞快訊</a></li>
<li><a href="#">產品展示</a></li>
    <li><a href="#">售后服務</a></li>
    <li><a href="#">聯系我們</a></li>
</ul>
</body>
</html>

 1 <script>
 2 window.onload=function(){
 3     var aA=document.getElementsByTagName('a');
 4     for(var i=0; i<aA.length; i++){
 5         aA[i].onmouseover=function(){
 6             var This=this;
 7         
 8             This.time=setInterval(function(){
 9                     This.style.width=This.offsetWidth+8+"px";
10                     if(This.width>=160)
11                     clearInterval(This.time);
12                 },30)
13         }
14         aA[i].onmouseout=function(){
15                 clearInterval(this.time);
16                 var This=this;
17                 this.time=setInterval(function(){
18                     This.style.width=This.offsetWidth-8+"px";
19                     if(This.offsetWidth<=120){
20                         This.style.width='120px';
21                         clearInterval(This.time);
22                     }
23                 },30)
24         }
25     }
26 }
27 </script>

注意到第10行中的

f(This.width>=160)這一句代碼，這句代碼是錯誤的，其實這樣的錯誤的原因是因為對width offsetwidth屬性不能深入理解導致的，width是字符串，offsetwidth是數值，那我就想，我在160后面加上“px”,這樣這句話就成立了啊，呵呵，可是這是一個判斷語句，字符串不參加“>=”的比較啊，所以我瞬間就懂了。
  說到這里，估計我再也不會犯這樣的錯誤了。
出現這樣的錯誤，網頁瀏覽器就直接不執行這一句話.

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 深入理解display屬性深入理解display屬性深入理解css中的margin屬性深入理解JavaScript中的屬性和特性深入理解 Vue Computed 計算屬性深入理解和應用Float屬性深入理解枚舉屬性與for-in和for-of 深入理解css中的margin屬性半深入理解Java屬性繼承深入理解position屬性&containing block

CSSs width屬性 和offsetwidth屬性深入理解

免責聲明！

CSSs width屬性和offsetwidth屬性深入理解