程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> C語言 >> C++ >> C++入門知識 >> DOM元素尺寸offsetWidth,scrollWidth,clientWidth等詳解

DOM元素尺寸offsetWidth,scrollWidth,clientWidth等詳解

編輯:C++入門知識

DOM元素尺寸offsetWidth,scrollWidth,clientWidth等詳解


例子:



 
<script>
    var div=document.getElementById(div);
    var ho=div.offsetHeight;
    var hc=div.clientHeight;
    console.log(ho,hc);
    </script>

1.offsetWidth

這裡寫圖片描述

offsetWidth=border+padding+height;
這裡等於: 50+50+200+50+50=400<喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxibG9ja3F1b3RlPg0KCTxwPtei0uKjujxzdHJvbmc+b2Zmc2V0V2lkdGg8L3N0cm9uZz6yu8Tc1NpkaXNwbGF5o7pub25ltcRkaXa78bXD1f3It9a1LL/J0tTTw2pxdWVyebXEPHN0cm9uZz5vdXRlcldpZHRoKCk8L3N0cm9uZz7V/ci3u/G1wzwvcD4NCjwvYmxvY2txdW90ZT4NCjxoMiBpZD0="2clientwidth">2.clientWidth

這裡寫圖片描述
clientWidth=padding+height-滾動條
這裡等於:50+200+50-17=283

注意:jquery的innerWidth()可不把滾動條計算進去,可得到結果300

3.scrollWidth

這裡寫圖片描述
scrollWidth=padding+包含內容的完全高度
這裡等於:50+402+50=502

4.scrollTop

定義:獲取位於元素頂部邊界與元素中當前可見內容的最頂端之間的距離
這裡寫圖片描述

scrollTop=scrollHeight-clientHeight
=padding+包含內容的完全高度-(padding+height-滾動條)
=包含內容的完全高度-height-滾動條

 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved