代码描述:javascript clientHeight clientWidh 属性。javascript clientHeight和clientWidh属性介绍
clientHeight和clientWidh属性的在javascript的DOM操作中也是非常常用的,下面就通过实例简单介绍一下这两个属性的用法,希望能够给需要的朋友带来一定的帮助。 各主流浏览器对这两个属性的解读都是一致的,这样我们就没有关于兼容性问题的后顾之忧,放心大胆的了解属性的意义就可以了。 一.clientHeight属性: 此属性可以返回指定元素可视内容区域的高度,也就是浏览器中可以看到的可视内容区域的高度。 注意:这个高度值不包括滚动条的高度,因为滚动条不算是内容区域。 clientHeight值:padding-top+padding-bottom+height-滚动条高度。 二.clientWidh属性: 此属性和clientHeight属性是大同小异的,原理是一样的,只是方位有所不同而已,这里就不多介绍了。 代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>scrollWidth和scrollHeight属性-51前端</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">51前端</div> </div> <input type="button" value="点击测试" id="bt"/> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能