clientWidth和clientHeight屬性的用法

螞蟻小編發表於2017-03-26
client

標題中的兩個屬性，在dom元素操作中會經常用到，下面就通過程式碼例項介紹一下它們的用法。

clientWidth屬性用來獲取指定元素可見區域的寬度。可見區域的寬度不包括邊框和滾動條區域的尺寸,但是包括padding的尺寸。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#thediv{
  width:100px;
  height:100px;
  background:red;
  position:fixed;
  top:100px;
  left:100px;
  border:10px solid blue;
  padding:5px;
  overflow:scroll
}
input{margin-top:200px;}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.innerHTML=odiv.clientHeight;
  }
}
</script>
</head>
<body>
<div id="thediv"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼演示clientHeight屬性的作用，當然clientWidth的原理也是如此。

相關文章