JavaScript實現三種常用網頁特效(offset、client、scroll系列)

Posted on by

一、元素偏移量 offset 系列

offset 翻譯過來就是偏移量， 我們使用 offset 系列相關屬性可以動態的得到該元素的位置（偏移）、大小等。

  • 獲得元素距離帶有定位父元素的位置
  • 獲得元素自身的大小（寬度高度）
  • 註意： 返回的數值都不帶單位

offset常用的屬性有：

例如：給定一個子盒子和一個父盒子，並給他們一定的大小，來看看這些屬性是怎樣獲得的：

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .father{
            position: relative;
            margin-left: 50px;
            margin-top: 10px;
            width: 200px;
            height: 200px;
            background-color: brown;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son')
        console.log('father.offsetLeft',father.offsetLeft);
        console.log('father.offsetTop',father.offsetTop);
        console.log('son.offsetWidth',son.offsetWidth);
        console.log('son.offsetHeight',son.offsetHeight);
    </script>
</body>

打印結果為：

我們知道，offset可以幫助我們得到元素的大小和父元素，但是style屬性也可以獲取到相關屬性，那麼，他們的區別又是什麼呢？

offset

  • offset 可以得到任意樣式表中的樣式值
  • offset 系列獲得的數值是沒有單位的
  • offsetWidth 包含padding+border+width
  • offsetWidth 等屬性是隻讀屬性，隻能獲取不能賦值

style

  • style.width 獲得的是帶有單位的字符串
  • style.width 獲得不包含padding和border 的值
  • style.width 是可讀寫屬性，可以獲取也可以賦值

二、元素可視區 client 系列

client 翻譯過來就是客戶端，我們使用 client 系列的相關屬性來獲取元素可視區的相關信息。通過 client 系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等。

例如，給定一個帶邊框的盒子，返回這些屬性，看看結果。

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: darkorchid;
            border: 20px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var box = document.querySelector('.box')
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientTop:'+box.clientTop);
</script>

結果為：

可以發現，通過client系列的得到的盒子大小並不包含盒子的邊框。

三、元素滾動 scroll 系列

scroll 翻譯過來就是滾動的，我們使用 scroll 系列的相關屬性可以動態的得到該元素的大小、滾動距離等。

例如：還是上面案例的盒子，我們打印其scroll系列屬性，看看結果

 <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: darkorchid;
            border: 20px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var box = document.querySelector('.box')
    console.log('box.scrollWidth:'+box.scrollWidth);
    console.log('box.scrollHeight:'+box.scrollHeight);
    console.log('box.scrollLeft:'+box.scrollLeft);
    console.log('box.scrollTop:'+box.scrollTop);
</script>

結果為：

我們發現得到的盒子高度和寬度都是我們的給定值，和client系列得到的值是一樣的，那麼他們的區別是什麼呢？現在我們給盒子裡面添加超過盒子高度的內容：

 <div class="box">
   王歡在學前端<br><br>
   王歡在學前端<br><br>
   王歡在學前端<br><br>
   王歡在學前端<br><br>
   王歡在學前端<br><br>
   王歡在學前端<br><br>
   王歡在學前端
</div>

打印結果為：

可以發現此時打印的盒子高度變大瞭，其實這個值是指盒子加上文字後自身實際的高度。

大傢還會發現兩次打印的box.scrollLeft和box.scrollTop的值都是0，這又是什麼意思呢？

現在我們通過overflow:auto將盒子內超出的內容讓其以滾動條的形式顯示，然後給他添加滾動事件，如下所示：

 var box = document.querySelector('.box')
    box.addEventListener('scroll',function(){
        console.log('box.scrollTop:'+box.scrollTop);
    })

效果為;

發現得到的值是隨著滾動來變化的，其實，box.scrollTop返回的是被卷去的上側距離，如下圖所示：

以上就是JavaScript實現三種常用網頁特效(offset、client、scroll系列)的詳細內容，更多關於JavaScript網頁特效的資料請關註WalkonNet其它相關文章！

推薦閱讀：