《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

Javascript&Jquery获取浏览器和屏幕各种高度宽度方法总结及运用的更多相关文章

  1. Javascript、Jquery获取浏览器和屏幕各种高度宽度（单位都为px）

    Javascript.Jquery获取浏览器和屏幕各种高度宽度 另外参见    http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html ...

  2. Javascript、Jquery获取浏览器和屏幕各种高度宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  3. Javascript、Jquery获取浏览器和屏幕各种高度宽度[mark]

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  4. JS、Jquery获取浏览器和屏幕各种高度宽度

    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...

  5. JS、JQUERY 获取浏览器和屏幕各种高度宽度

    好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...

  6. C#-WebForm-Javascript、Jquery获取浏览器和屏幕各种高度宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  7. Jq_Js_Js、Jq获取浏览器和屏幕各种高度宽度

    $(document).ready(function()         {alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).he ...

  8. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

  9. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

随机推荐

  1. jquery之营销系统(补偿记录)

    var appPath = getAppPath(); $(function(){ $("#opreateHtml").window("close"); $(& ...

  2. 转载——SqlServer之like、charindex、patindex

    转载自:http://www.2cto.com/database/201305/214967.html SqlServer之like.charindex.patindex   1.环境介绍 测试环境 ...

  3. 基本 XAML 语法指南

    我们介绍了 XAML 语法规则,以及用于描述 XAML 语法中存在的限制或选项的术语.当出现以下情况时你会发现本主题很有用:不熟悉 XAML 语言的使用,希望加强对术语或某些语法部分的理解,或者对 X ...

  4. Code First研究学习2_基本的错误及解决方法

    使用Code First时总有很多的问题出现,以下列举了一些基本的错误及解决方法! 1.当用Enable-Migrations启动数据库迁移后,如果再继续输入Enable-Migrations命令,则 ...

  5. Objective-C 引用计数：不讲用法，只说原理

    本文所使用的源码为 objc4-647 和 CF-1153.18 实际上这是我本周实习周报的一部分,写的比较仓促,如有差错还请多多指正. 不讲用法,只说原理. 引用计数如何存储 有些对象如果支持使用 ...

  6. poj1850

    是因为我好久不刷题了吗,这个题竟然做了俩小时,好几个思路都被推翻 用dp数组预处理出范围是a->a+x字符y长度有多少种递增串 然后例如def首先求a__有多少种情况那么自然后面就是只有b即dp ...

  7. php 之 类，对象（三）多态性，函数重载，克隆

    一.三大特性之三 多态性(在php中表象不明显)1.概念:当父类引用指向子类实例时,由于子类对父类函数进行了重写,导致我们在使用该引用去调用相应的方法显示出的不同.2.发生条件:1.必须有继承 2. ...

  8. How many ways??（HDU 2157）

    How many ways?? Sample Input 4 4 //n个点,m条路径0 1 //s->t可通0 21 32 32 //询问数0 3 2 //从0到3走两条路可到的方案有多少种0 ...

  9. 部署在腾讯云的公益网站遭受了一次CC攻击

    版权声明:本文由黄希彤  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/651089001483090830 来源:腾云阁 ...

  10. HTTP服务负载均衡总结

    从一开始就要思考扩展的架构,所谓可扩展性指的是通过扩展规模提高承载能力的本领,往往体现在增加物理服务器或者集群节点.负载均衡是常见的水平扩展的手段. 目标:(1)减少单点故障(2)提升整体吞吐量(3) ...