clientWidth和offsetWidth的區別

admin發表於2017-03-28
client

標題中的兩個屬性都是獲取元素的一個寬度值，當然clientHeight和offsetHeight也是同樣的道理。

但是這個寬度還是有所區別的，下面就通過程式碼例項做一下簡單介紹。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#antzone{
  width:200px;
  height:100px;
  border:10px solid green;
  padding:5px;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var odiv=document.getElementById("antzone");
  var clientWidth=odiv.clientWidth;
  var offsetWidth=odiv.offsetWidth;
  odiv.innerHTML="clientWidth:"+clientWidth+"<br/>"+
  "offsetWidth:"+offsetWidth;
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼最兩個屬性的功能做了一下演示，下面簡述一下它們的區別。

1.clientWidth:width + padding。

2.offsetWidth:width + padding+border。

相關文章