<!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. 聊一聊Spring中的线程安全性

    Spring作为一个IOC/DI容器,帮助我们管理了许许多多的“bean”.但其实,Spring并没有保证这些对象的线程安全,需要由开发者自己编写解决线程安全问题的代码. Spring对每个bean提 ...

  2. go语言之进阶篇runtime包中 Gosched Goexit GOMAXPROCS的使用

    一.runtime包 1.Gosched的使用 runtime.Gosched() 用于让出CPU时间片,让出当前goroutine的执行权限,调度器安排其他等待的任务运行,并在下次某个时候从该位置恢 ...

  3. 如何使用.net访问Access数据库 （转）

    前言:今天整理程序,看到之前写的一个Demo,也不知道是从哪里参考的了,写到这里,留作备用吧. 使用.net访问Access数据库:1.BL层:新增一个DataAccess类. Code].Defau ...

  4. Multiply Strings leetcode java

    题目: Given two numbers represented as strings, return multiplication of the numbers as a string. Note ...

  5. 前端性能优化：配置ETag

    什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串,是web服务器用于确认缓存组件的有效性的一种机制,通常可以使用组件的某些属性来构造它. 条件GET请求 浏览 ...

  6. Android 混合式开发AppCan介绍

    Android程序员开发已从最早的异常火热到现在已经逐渐趋向稳定,目前企业针对Android开发工程师的要求要求已逐步提高,现在想从众多的面试者中脱颖而出,必须打好坚实的代码基础. 今天为大家介绍一款 ...

  7. mysql开启日志sql语句

    #查看日期情况 #show variables like '%general%'; #开启日志 #SET GLOBAL general_log = 'On'; #指定日志文件 #SET GLOBAL ...

  8. 【Scala】Scala-Map使用方法

    Scala-Map使用方法 scala map put_百度搜索 Scala中的Map使用例子 - CSDN博客 How to populate java.util.HashMap on the fl ...

  9. kaggle预测

    两个预测kaggle比赛 一 .https://www.kaggle.com/c/web-traffic-time-series-forecasting/overview Arthur Suilin• ...

  10. 单元测试中用@Autowired 报null (空指针异常)

    原因是因为,单元测试不依赖于容器,所以自动注入也就存在问题 (单元测试中加@Autowired注解亲自测过是不行,不知道这样理解的是否正确)