网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight (出现滚动条,滚动条可看到的全部界面的高度)
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
jquery
获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width();
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :$(document).width();
获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
计算元素位置和偏移量
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo 指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll 是否把 滚动条计算在内,默认TRUE
options.padding 是否把padding计算在内,默认false
options.margin 是否把margin计算在内,默认true
options.border 是否把边框计算在内,默认true
以上转自:http://blog.csdn.net/ljw520204/article/details/6925775
测试demo:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#box{
width:400px;
height:200px;
border:10px #aaa solid;
position:absolute;
top:25%;
left:35%;
padding:10px;
background-color:red;
overflow:scroll;
}
body{
width:700px;
height:200px;
background-color:#abc;
border:10px green solid;
padding:10px;
}
p{
margin:0;
}
</style>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("box");
console.log(ele.clientWidth);
console.log(ele.clientHeight);
console.log(ele.offsetWidth);
console.log(ele.offsetHeight);
console.log(ele.offsetTop);
console.log(ele.offsetLeft);
console.log(ele.scrollWidth);
console.log(ele.scrollHeight);
alert(ele.clientWidth + "/"+ele.clientHeight+"/"+ele.offsetWidth+"/"+ele.offsetHeight+"/"+ ele.scrollWidth +"/"+ele.scrollHeight+ "/"+ele.scrollTop + "/"+ele.scrollLeft + "/");
/*console.log(document.body.clientWidth);
console.log(document.body.clientHeight);
console.log(document.body.offsetWidth);
console.log(document.body.offsetHeight);
console.log(document.body.scrollWidth);
console.log(document.body.scrollHeight);
console.log(document.body.scrollTop);
console.log(document.body.scrollLeft);
console.log(window.screenTop);
console.log(window.screen.height);
console.log(window.screen.availHeight);
console.log(window.screen.width);
console.log(window.screen.availWidth);
console.log();
console.log();
console.log();
console.log();
console.log();*/
}
</script>
</head>
<body>
sfdsgdsgdgdgd
dsfdsf
<<div id="box">
<p>
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
网页正文部分左: window.screenLeft;
网页正文部分左: window.screenLeft;
网页正文部分左: window.screenLeft;
</p>
</div>
</body>
</html>
测试demo图:
测试结果分析小结:
测试浏览器IE / FireFox / googleChrome
1. ele.clientWidth = width + padding-left + padding-right , ele.clientHeight 同理 ele.clientWidth
2. ele.offsetWidth = width + padding(left,right) + border(left,right), ele.offsetHeight 同理 ele.offsetWidth
注意:如果元素ele 的样式设置了 {overflow:scroll} ,
ele.clientWidth = width + padding(left,right) - 滚动条的宽度, ele.clientHeight 同理 ele.clientWidth
且测试数据显示出浏览器 FF 和 IE 的值 ( 203px ) 相同,不同于google ( 201px )
3. ele.scrollWidth 的 宽度 = 实际内容的宽度(含被隐藏部分的宽度)
ele.scrollHeight的高度 = 实际内容的高度(含被隐藏部分的高度)
注意:在IE8及以上,FF, googleChrome浏览器下,
ele.scrollWidth 的 最小宽度 = ele.clientWidth,
ele.scrollHeight的最小高度 = ele.clientHeight
在IE7下:
ele.scrollWidth 的 最小宽度 = ele.clientWidth,
ele.scrollHeight的最小高度 = 内容实际高度