javascript的clientHeight和clientWidh屬性介紹

admin發表於2017-03-10
JavaScriptclient

clientHeight和clientWidh屬性的在javascript的DOM操作中也是非常常用的，下面就通過例項簡單介紹一下這兩個屬性的用法，希望能夠給需要的朋友帶來一定的幫助。

各主流瀏覽器對這兩個屬性的解讀都是一致的，這樣我們就沒有關於相容性問題的後顧之憂，放心大膽的瞭解屬性的意義就可以了。

一.clientHeight屬性:

此屬性可以返回指定元素可視內容區域的高度，也就是瀏覽器中可以看到的可視內容區域的高度。

注意:這個高度值不包括滾動條的高度，因為滾動條不算是內容區域。

clientHeight值:padding-top+padding-bottom+height-滾動條高度。

二.clientWidh屬性:

此屬性和clientHeight屬性是大同小異的，原理是一樣的，只是方位有所不同而已，這裡就不多介紹了。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>scrollWidth和scrollHeight屬性-螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
body{text-align:center;}
#box{
  width:200px;
  height:150px;
  background-color:red;
  margin:0px auto;
  margin-top:50px;
  overflow:scroll;
  padding:10px;
}
#inner{
  width:100px;
  height:300px;
  background-color:blue;
  margin:0px auto;
  font-size:12px;
  line-height:12px;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var box=document.getElementById("box");
  var inner=document.getElementById("inner");
  var bt=document.getElementById("bt");
   
  bt.onclick=function(){
    alert(box.clientHeight);
  }
}
</script>
</head>
<body>
<div id="box">
<div id="inner">螞蟻部落</div>
</div>
<input type="button" value="點選測試" id="bt"/>
</body>
</html>

以上程式碼中，當點選按鈕可以彈出box元素的clientHeight屬性值153。

box的clientHeight屬性值:padding-top加padding-bottom加height減滾動條高度。

相關文章