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 ...
随机推荐
- Spring注解的使用和区别：@Component、@Service、@Repository、@Controller
Spring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释,它们分别是:@Repository.@Service 和 @Controller.在目前的 Spring ...
- [RxJS] Creation operator: of()
RxJS is a lot about the so-called "operators". We will learn most of the important operato ...
- PHP字符串的编码问题(转)
大家都知道,不同字符编码,其在内存占用的字节数不一样.如ASCII编码字符占用1个字节,UTF-8编码的中文字符是3字节,GBK为2个字节. PHP 也自带几种字符串截取函数,其中常用到的就是 s ...
- virtual-虚方法
看来本人理论果然不行啊,这个东西折腾死我了.即便是到现在,还是云里雾里.... 个人认为virtual的特点就是可以被override而不是必需的,到目前为止我用它的地方也比较少. public cl ...
- web前端之文件上传
前言 最近太忙一直没时间认真的写博客(哈哈哈),最近pm提一个需求,移动端需要一个上传图片的功能,允许多选.删除.预览.点击查看大图并可以滑动.虽然听起来很多,但是这个功能在web上实现过啊,使用we ...
- Edwin windows下基本命令：
Ctrl-Alt-z: 对区域内所有代码求值. Ctrl-x Ctrl-e: 对光标左边或上一个表达式求值. Ctrl-c Ctrl-x: 中断当前求值. Ctrl-a: 移动到行首. Ctrl-e: ...
- oracle nvl()函数在使用中出现的问题
看一条sql select q.*, r.goods_name from (select nvl(t.goods_code, s.goods_code) goods_code, t.buy_open_ ...
- java文件io过滤器
package cn.stat.p1.file; import java.io.File; public class newfilelist { /** * @param args */ public ...
- poj 1080 dp
基因配对 给出俩基因链和配对的值 求配对值得最大值 简单dp #include<iostream> #include<stdio.h> #include<string ...
- C++ Primer 5th 第6章 函数
正如第一章所说:C++的函数是一个能够完成一个功能的模块或者说是一段命名了的代码块. 如下图所示,函数可以重载,是一段实现某些功能命名了的代码. 一个完整的函数的构成有四部分: 1.返回类型 2.函数 ...