标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function(){ var oD=document.getElementById("w"); var oD1=document.getElementById("w1"); //alert("oD.clientWidth="+oD.clientWidth);//可视内容宽度 不包括border 滚动条的可视宽度 //alert("oD.offsetWidth="+oD.offsetWidth);//实际宽度 包括border 滚动条 //alert("oD.scrollWidth="+oD.scrollWidth);// 内容宽度 //alert("oD.clientHeight="+oD.clientHeight); //alert("oD.offsetHeight="+oD.offsetHeight); //alert("oD.scrollHeigth="+oD.scrollHeight); alert("oD1.scrollHeight="+oD1.scrollHeight);//scrollHeight=542px; 因为内容实际宽度 由标签默认属性影响 margin padding等 多了32px； }; </script> <style> #w{width:500px;height:500px;border:1px solid #ccc;overflow-x:scroll;/*margin:0 auto; opacity:0.5;*/float:left;} #w p{width:510px;height:510px;display:block;background:red;} #w1{height:auto;float:left;background:blue;} #w1 p{height:510px;display:block;} div,p{margin:0px;padding:0px;} </style> </head> <body> <div id="w"> <p>width:500px;height:500px;margin:0 auto;border:1px solid #ccc;</p> </div> <div id="w1"> <p>width:500px;height:500px;margin:0 auto;border:1px solid #ccc;</p> </div> </body> </html>
关于 clientWidth offsetWidth scrollWidth的理解
标签：
原文地址：http://www.cnblogs.com/dream-w/p/4855353.html
