<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>js获取height和width总结</title>

    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>

    <script type="text/javascript" src="js/jquery-1.5.2.js"></script>

    <script type="text/javascript" >

       $(document).ready(function()

        {

        alert("浏览器当前窗口可视区域高度:"+$(window).height()); //浏览器当前窗口可视区域高度

        alert("浏览器当前窗口文档的高度:"+$(document).height()); //浏览器当前窗口文档的高度

        alert("浏览器当前窗口文档body的高度:"+$(document.body).height());//浏览器当前窗口文档body的高度

        alert("浏览器当前窗口文档body的总高度 包括border padding margin:"+$(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

        alert("浏览器当前窗口可视区域宽度:"+($(window).width())); //浏览器当前窗口可视区域宽度

        alert("浏览器当前窗口文档对象宽度:"+$(document).width());//浏览器当前窗口文档对象宽度

        alert("浏览器当前窗口文档body的高度:"+$(document.body).width());//浏览器当前窗口文档body的高度

        alert("浏览器当前窗口文档body的总宽度 包括border padding margin:"+$(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

        alert("显示器分辨率，只能用JavaScript代码获取高度:"+screen.height);//显示器分辨率，只能用JavaScript代码获取

        alert("显示器分辨率，只能用JavaScript代码获取宽度:"+screen.width);

        })  ;  

    </script>  

</head>

<body>

    <ul>

         <li>  网页可见区域宽： document.body.clientWidth    </li>

         <li>   网页可见区域高： document.body.clientHeight  </li>

         <li>   网页可见区域宽： document.body.offsetWidth (包括边线的宽)</li>

         <li>  网页可见区域高： document.body.offsetHeight (包括边线的高)    </li>

         <li>  网页正文全文宽： document.body.scrollWidth                   </li>

         <li>   网页正文全文高： document.body.scrollHeight                       </li>

         <li>    网页被卷去的高： document.body.scrollTop  </li>

         <li>    网页被卷去的左： document.body.scrollLeft  </li>

         <li>    网页正文部分上： window.screenTop   </li>

         <li>    网页正文部分左： window.screenLeft   </li>

         <li>   屏幕分辨率的高： window.screen.height</li>

         <li>   屏幕分辨率的宽： window.screen.width  </li>

         <li>   屏幕可用工作区高度： window.screen.availHeight</li>

         <li>   屏幕可用工作区宽度： window.screen.availWidth </li>

     </ul>  

</body>

</html>

js获取height和width总结的更多相关文章

  1. 【原】js获取height为auto的高度问题

    今天用react写一个页面,需要获取一个img高度设置为auto的高度,可是一直获取到的要么是0,要么是null,因为页面加载完了图片不一定加载完. 当我把高度由 auto 设置为固定值之后,又可以获 ...

  2. screen.height && screen.width

    screen.height && screen.width how to get window max width in js screen.height; screen.width; ...

  3. 解决在onCreate()过程中获取View的width和Height为0的4种方法

    很经常当我们动态创建某些View时,需要通过获取他们的width和height来确定别的view的布局,但是在onCreate()获取view的width和height会得到0.view.getWid ...

  4. 解决在onCreate()过程中获取View的width和Height为0的方法

    最近在看Android底层代码的view绘制原理的时候讲到一个很有意思的事情,也是我几年前刚开始学习Android开发的时候比较纳闷的一个问题,如果你不理解Android的底层绘制,请看我之前一片文章 ...

  5. 关于CSS和JS中用到的各种Height和Width的问题

    自己记不住,列一下关于CSS和JS中用到的各类有关Height和Width属性的介绍对比. 所属类别 属性名 意义 其他 浏览器模型 Screen.height 浏览器窗口所在的屏幕的高度(单位像素) ...

  6. 解决获取View的width和Height为0的4种方法

    很经常当我们动态创建某些View时,需要通过获取他们的width和height来确定别的view的布局,但是在onCreate()获取view的width和height会得到0.view.getWid ...

  7. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  8. 如何用 js 获取table 或者其他块状标签的 宽和高

    这个比较简单,总体思想,标签标记一个id,js获取id,就能用它的属性了.介绍两种方法.请看下面代码. 第一种 <script> function width_table_all() { ...

  9. 《项目经验》--通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据库表中

      先看一下我要实现的功能界面:   这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面 ...

随机推荐

  1. 5.2 dubbo-compiler源码解析

    ExtensionLoader<Protocol> loader = ExtensionLoader.getExtensionLoader(Protocol.class); final P ...

  2. C#高级编程六十六天----表达式树总结【转】

    https://blog.csdn.net/shanyongxu/article/details/47257139 表达式树总结 基础 表达式树提供了一个将可执行代码转换成数据的方法.如果你要在执行代 ...

  3. [leetcode]Unique Binary Search Trees II @ Python

    原题地址:https://oj.leetcode.com/problems/unique-binary-search-trees-ii/ 题意:接上一题,这题要求返回的是所有符合条件的二叉查找树,而上 ...

  4. eclipse如何debug调试jdk源码，并显示局部变量

    http://blog.csdn.net/xuefeng0707/article/details/8738869 http://blog.csdn.net/leehsiao/article/detai ...

  5. jenkins+php+svn快速部署测试环境开发环境快速部署

    jenkins 虽然作为java常用的打包部署工具,不过也可以使用在phpweb项目部署管理,前段时间帮公司部署了开发环境与测试环境,简单分享一下. 1.内网web环境搭建lnmp,centos下编译 ...

  6. T 分布（近似标准正态分布）

    1.1      定义 定义:假设X服从标准正态分布N(0,1),Y服从卡方分布,那么的分布称为自由度为n的t分布,记为. T分布密度函数其中,Gam(x)为伽马函数. 可用于两组独立计量资料的假设检 ...

  7. 利用Docker搭建java项目开发环境

    一.需求 一台 Ubuntu 16.0.4 LTS ,安装了Docker服务,Rancher服务,也制作了Tomcat相关的image,接下来我们就来说一下如何快速的构建一个开发环境和测试环境 二.步 ...

  8. 设置py文件的路径

    想在IDLE中打开py文件,需要设置PYTHONPATH环境变量: 设置后,就能在IDLE的Path Browser中看到sys.path了: 然后,就可以用import了

  9. OpenGL ES Shader语言中的函数不支持递归

    An example function definition is given here for a simple function that computes basic diffuse light ...

  10. Android OpenGL ES和OpenGL一起学（二）------理解Viewport（视口）和坐标系Android OpenGL ES篇(转帖)

      来自:http://www.cnblogs.com/xiaobo68688/archive/2011/12/01/2269985.html   首先我们在屏幕中心显示一个矩形,效果如图: // 代 ...