解析网页元素的尺寸与滚动条信息-优快云博客

本文链接：https://blog.youkuaiyun.com/hi_beijing/article/details/84319717

<!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>
</head>

<body style="padding:50px;margin:0px; height:2000px;border:10px solid red;">
<div id="divs" style="width:240px; height:300px; padding:80px;  border:20px solid red;">
	<div id="div" style="width:200px; height:300px; margin:20px;  border:20px solid red;"></div>
</div>
<script>
var w = document.getElementById("div");
document.writeln("body.offsetWidth："+document.body.offsetWidth+"=>对象的内Width + 边框<br/>");
document.writeln("body.clientWIdth："+document.body.clientWidth+"=>对象的内Width<br/>");
document.writeln("div.offsetWidth："+w.offsetWidth+"=>对象的内Width + 边框<br/>");
document.writeln("div.clientWIdth："+w.clientWidth+"=>对象的内Width<br/>");
document.writeln("div.offsetLeft："+w.offsetLeft+" 在IE下包括body的边框，在FF下不包括它的边框<br/>");
document.writeln("div.clientLeft："+w.clientLeft+"内容与Div边的距离<br/>");
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
document.writeln("document.documentElement.clientHeight获取浏览器的Width："+winWidth+"<br/>");
document.writeln("document.documentElement.clientWidth获取浏览器的Height："+winHeight+"<br/>");
document.write("获取滚动条的Top："+document.documentElement.scrollTop+"<br/>");
document.write("获取滚动条的Left："+document.documentElement.scrollLeft+"<br/>");
document.write("获取滚动条的Width："+document.documentElement.scrollWidth+"<br/>");
document.write("获取滚动条的height："+document.documentElement.scrollHeight+"<br/>");
document.write("获取Body的height："+document.body.offsetHeight+"<br/>");
</script>
</body>
</html>

脚本化文档DOM之一