jQuery,javascript获得网页的高度和宽度及个别用法测试
2014-09-19 16:56
246 查看
网页可见区域宽： 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的最小高度 = 内容实际高度
网页可见区域高： 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的最小高度 = 内容实际高度
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery,javascript获得网页的高度和宽度
- jQuery,javascript获得网页的高度和宽度
- jQuery javascript获得网页的高度与宽度的实现代码
- jQuery javascript获得网页的高度与宽度的实现代码
- jQuery,javascript获得网页的高度和宽度
- jQuery,javascript获得网页的高度和宽度【收藏】
- jQuery,javascript获得网页的高度和宽度
- jQuery,javascript获得网页的高度 宽度 滚动
- jQuery,javascript获得网页的高度和宽度(转)
- jQuery,javascript获得网页的高度和宽度
- jQuery,javascript获得网页的高度和宽度$(document).height / $(window).height
- jQuery,javascript获得网页的高度和宽度$(document).height / $(window).height
- [转]jQuery,javascript获得网页的高度和宽度
- jQuery,javascript获得网页的高度和宽度
- jQuery,javascript获得网页的高度和宽度 .
- jQuery,javascript获得网页的高度和宽度
- jQuery,javascript获得网页的高度和宽度
- jQuery,javascript获得网页的高度和宽度
- jQuery,javascript获得网页的高度和宽度
- jQuery,javascript获得网页的高度和宽度