<!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. [数学] 将长为L的木棒随机折成3段，则3段构成三角形的概率

    1.题目 如题,将长为L的木棒随机折成3段,则3段构成三角形的概率是多少? 2.解析 这个与其说是编程题目,倒不如说是个数学题目.可能是你没有见过,或者没有过这种解题思想.(还是那句,一回生两回熟,类 ...

  2. go语言之进阶篇正则表达式

    正则表达式是一种进行模式匹配和文本操纵的复杂而又强大的工具.虽然正则表达式比纯粹的文本匹配效率低,但是它却更灵活.按照它的语法规则,随需构造出的匹配模式就能够从原始文本中筛选出几乎任何你想要得到的字符 ...

  3. c++实现Xml和json互转【转】

    https://blog.csdn.net/kfy2011/article/details/51774242 1.下载c语言的cJson库源码,库很小,只有两个文件cJSON.c和cJSON.h.下载 ...

  4. [leetcode]Gas Station @ Python

    原题地址:https://oj.leetcode.com/problems/gas-station/ 题意: There are N gas stations along a circular rou ...

  5. 如何确定HyperThreading是否在Linux上已开启？

    命令如下: dmidecode -t processor | grep HTT 参考资料 ============= https://unix.stackexchange.com/questions/ ...

  6. vue路由跳转传参数

    1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data } ...

  7. 赋值操作符、复制构造函数、析构函数、static成员练习

    /** * 定义一个Employee类,包含雇员名字和一个唯一的雇员标识,为该类定义默认构造函数和参数为表示 * 雇员名字的string构造函数.如果该类需要复制构造函数或赋值操作符,实现这些函数 * ...

  8. 【图片识别】Java中使用tess4J进行图片文字识别（支持中文）（转）

    http://blog.csdn.net/wsk1103/article/details/54173282 java中识别文字比较简单,使用的软件是tesseractocr(使用的版本是3.02,3以 ...

  9. linux 安装elasticsearch 可能遇到的问题

    1.can not run elasticsearch as root 切换到非root用户 因为安全问题elasticsearch 不让用root用户直接运行,所以要创建新用户 第一步:liunx创 ...

  10. Windows版Mycat结合mysql安装配置+水平切分（转载）

    来源:https://segmentfault.com/a/1190000009495748 参考文档:Mycat安装与使用 环境 环境 版本 windows 10 java 1.8.0 mysql ...