Javascript&Jquery获取浏览器和屏幕各种高度宽度方法总结及运用
《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篇》
- 获取浏览器显示区域（可视区域）的高度 ： $(window).height();
- 获取浏览器显示区域（可视区域）的宽度 ：$(window).width();
- 获取页面的文档高度 $(document).height();
- 获取页面的文档宽度 ：$(document).width();
- 浏览器当前窗口文档body的高度： $(document.body).height();
- 浏览器当前窗口文档body的宽度： $(document.body).width();
- 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度) $(document).scrollTop();
- 获取滚动条到左边的垂直宽度 ：$(document).scrollLeft();
- 获取或设置元素的宽度：$(obj).width();
- $(obj).height();
- 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
Javascript&Jquery获取浏览器和屏幕各种高度宽度方法总结及运用的更多相关文章
- Javascript、Jquery获取浏览器和屏幕各种高度宽度（单位都为px）
Javascript.Jquery获取浏览器和屏幕各种高度宽度 另外参见 http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html ...
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- Javascript、Jquery获取浏览器和屏幕各种高度宽度[mark]
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- JS、Jquery获取浏览器和屏幕各种高度宽度
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
- JS、JQUERY 获取浏览器和屏幕各种高度宽度
好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...
- C#-WebForm-Javascript、Jquery获取浏览器和屏幕各种高度宽度
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- Jq_Js_Js、Jq获取浏览器和屏幕各种高度宽度
$(document).ready(function() {alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).he ...
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...
- JS 获取浏览器和屏幕宽高等信息代码
JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:doc ...
随机推荐
- POJ burnside&&polya整理练习
POJ 2409 Let it Bead 这题就是polya公式的直接套用,唯一麻烦的是置换群的种类数,由于可以翻转,所以除了要加上pow(c,gcd(s,i))这些平面旋转的置换群,还要加上翻转的. ...
- Java基础知识强化62：Arrays工具类之概述和使用
1. Arrays工具类: Arrays这个类包含操作数组(比如排序和查找)的各种方法. 2. Arrays的方法: (1)toString方法:把数组转成字符串 public static Stri ...
- ftp nfs samba比较
首先从字面意思上区分一下:1. FTP(文件传输协议)2. NFS(网络文件系统)3. samba 即smb(服务信息块)协议其中FTP 是TCP/IP协议栈所提供的一种子协议,该子协议具体可以实现在 ...
- 爆炸！iOS资源大礼包(持续更新...)
今天为大家整理了一些关于iOS学习的干货,献给正在奋斗的你们,首先声明一下,在整理的过程中参考了大量的博客和文章,知识的分享终究会增值,在此表示感谢,希望这篇文章给大家带来帮助. 基础部分: C语言教 ...
- hibernate级联保存，更新个人遇到的问题
在级联更新的时候,数据库中的数据是增加的,只是外键不存在,导致这样的问题产生的原因是,字表主键ID没有添加到集合中,导致Hibernate找不到子项而执行更新.
- 关于在transform下的子元素设置fixed无效的困惑
最近的项目是要实现一个点击显示隐藏边栏的效果,而且需要边栏随着滚动而滚动. 思路简单,不就一个css的动画和一个position为fixed,搞定!但不想,设为fixed的子元素竟然无法fixed,这 ...
- PHP扩展开发(4) - 多类扩展
由于函数和单类的扩展,网上一搜一大片,这里就不再叙述了. 这里特别感谢laruence(鸟哥)开源的yaf扩展,解决困扰我多时的多类问题,还在看他的代码学习中,这里是对多类写法学习的一个阶段总结. ...
- PHP 汉字转拼音(首拼音,所有拼音)
<?php /** +------------------------------------------------------ * PHP 汉字转拼音 +------------------ ...
- JQ点击列表显示隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Gradle sync failed: failed to find Build Tools revision 21.1.2
从github上下载了一个开源项目到Android Studio 出现以下问题: 下午2:56:05 Gradle sync started下午3:00:11 Gradle sync failed: ...