Javascript&Jquery获取浏览器和屏幕各种高度宽度方法总结及运用

2022-11-17 13:24:29

《js篇》

Javascript获取浏览器和屏幕各种高度宽度方法总结

document.body.clientWidth //网页可见区域宽(body)
document.body.clientHeight //网页可见区域高(body)
document.body.offsetWidth //网页可见区域宽(body)，包括border、margin等
document.body.offsetHeight //网页可见区域宽(body)，包括border、margin等
document.body.scrollWidth //网页正文全文宽，包括有滚动条时的未见区域
document.body.scrollHeight //网页正文全文高，包括有滚动条时的未见区域
document.body.scrollTop //网页被卷去的Top(滚动条)
document.body.scrollLeft //网页被卷去的Left(滚动条)
window.screenTop //浏览器距离Top
window.screenLeft //浏览器距离Left
window.screen.height //屏幕分辨率的高
window.screen.width //屏幕分辨率的宽
window.screen.availHeight //屏幕可用工作区的高
window.screen.availWidth //屏幕可用工作区的宽

第一种情况就是宽高都写在样式表里，就比如#div1{height:120px;}。这中情况通过#div1.style.height拿不到高度，而通过#div1.offsetHeight才可以获取到高度。

第二种情况就是高是写在行内中，比如style="height:120px;"，这中情况通过上述2个方法都能拿到宽度。

综上，

因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。

现在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应的（就像#div1.style.width对应#div1.offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。

CORE代码：

var o = document.getElementById("view");

var h = o.offsetHeight;  //高度

var w = o.offsetWidth;  //宽度

DEMO示例：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>min-height</title>

</head>

<body>

<div  id="demo">

  demo

</div>

<script type="text/javascript">

var ele_selector=document.getElementById('demo')

var true_height=parseInt(selector.offsetHeight);

//假设要设置的min-height的值为400

if (true_height<400) {

    selector.style.height="400px";

};

</script>

</body>

</html>

《jquery篇》

Javascript获取浏览器和屏幕各种高度宽度方法总结

获取浏览器显示区域（可视区域）的高度： $(window).height();
获取浏览器显示区域（可视区域）的宽度：$(window).width();
获取页面的文档高度 $(document).height();
获取页面的文档宽度：$(document).width();
浏览器当前窗口文档body的高度： $(document.body).height();
浏览器当前窗口文档body的宽度： $(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度) $(document).scrollTop();
获取滚动条到左边的垂直宽度：$(document).scrollLeft();
获取或设置元素的宽度：$(obj).width();

获取或设置元素的高度：

$(obj).height();

　　　　　　某个元素的上边界到body最顶部的距离：obj.offset().top;（在元素的包含元素不含滚动条的情况下）

　　　　　　某个元素的左边界到body最左边的距离：obj.offset().left;（在元素的包含元素不含滚动条的情况下）

　　　　　　返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offset().top（在元素的包含元素含滚动条的情况下）

　　　　　　返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offset().left（在元素的包含元素含滚动条的情况下）

scrollTop(), scrollLeft()

　　　　　　设置或返回已经滚动到元素的左边界或上边界的像素数。简单地说，就是设置或者获取匹配元素相对滚动条上侧或者左侧的偏移。
只有在元素有滚动条的时候元素的 CSS overflow 属性设置为 auto 的时候，这些像素才有用。
这些属性也只在文档的 <body> 或 <html> 标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。
注意，这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性

DEMO示例：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>min-height</title>

</head>

<body>

<div class="demo">

  demo

</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

	$(function(){

var true_height=parseInt($(".demo").height());

//假设要设置的min-height的值为400

if (true_height<400) {

    $(".demo").css("height","400px");

};

});

</script>

</body>

</html>

参考资料：

http://hemin.cn/jq/cheatsheet.html

http://blog.csdn.net/makiyonn/article/details/8587353

http://blog.sina.com.cn/s/blog_51048da70101djoy.html

码农公寓

相关文章