代码描述:offsetWidth和clientWidth属性区别。offsetWidth和clientWidth属性区别代码实例
标题中的两个属性在dom操作中比较常见,它们都会返回指定元素的一个宽度,但是两者是有区别的,下面就通过代码实例介绍一下它们两者的区别,当然offsetHeight和clientHeight属性也是如此,同样的道理。 代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> *{ margin:0px; padding:0px; } body{text-align:center;} #thediv{ width:150px; height:200px; background:green; margin:0px auto; overflow:scroll; margin-top:50px; border:5px solid #60F; } #inner{ width:50px; height:300px; margin:0px auto; background:red; padding:15px; } #show{ width:100px; margin:0px auto; } </style> <script type="text/javascript"> window.onload=function(){ var obt=document.getElementById("bt"); var oshow=document.getElementById("show"); var odiv=document.getElementById("thediv"); obt.onclick=function(){ oshow.innerHTML="clientHeight:"+odiv.clientHeight+"<br/>"; oshow.innerHTML=oshow.innerHTML+"offsetHeight:"+odiv.offsetHeight; } } </script> </head> <body> <div id="thediv"> <div id="inner"></div> </div> <div id="show"></div> <input type="button" id="bt" value="查看效果"/> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能