<!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. 会动的文字Marquee应用(转)

    想要做个滚动公告,看了网上的教程,无一不是很恐怖的场频啊java语言编制的JS,或者就是各种复杂,无意中发现了Marquee这东西,用了一下,很简单,只需两行代码,即可以实现很好的效果,特此分享一下. ...

  2. [PowerShell Utils] Remotely install Hyper-V and Failover Cluster feature on a list of windows 2012 servers

    Hello everyone, this is the second post of the series. .   Background =============== In my environm ...

  3. iOS开发-UINavigationBar和Status Bar实用技巧

    iOS7之后关于UINavigationBar和Status  Bar都发生了一系列的改变,如果不需要兼容iOS7之后的设备,按照网上有些资料去解决问题会踩到一些坑.在iOS 7中,我们可以修改每个V ...

  4. iOS开发-ViewController的生命周期和切换

    ViewController在App开发中是至关重要的一环,无论是页面的展示和数据之间的交互,ViewController提供了一个框架可以管理和构建App应用.iOS中构建App提供了两种方式一种是 ...

  5. Letter Combinations of a Phone Number leetcode java

    题目: Given a digit string, return all possible letter combinations that the number could represent. A ...

  6. Kalman滤波器从原理到实现

    Kalman滤波器的历史渊源 We are like dwarfs on the shoulders of giants, by whose grace we see farther than the ...

  7. Java-Shiro（一）：简介

    简介 Apache Shiro是Java的一个安全权限框架. Shiro可以非常容易的开发出足够好的额应用,其不仅可以用在JavaSE环境,也可以用在Java SE环境. Shiro可以完成:认证.授 ...

  8. Java归去来第1集：手动给Eclipse配置Maven环境

    一.Eclipse配置Maven 1.1.下载Maven http://maven.apache.org/download.cgi,选择对应的版本,window下载apache-maven-3.5.3 ...

  9. 高速基于echarts的大数据可视化

    [Author]: kwu 高速基于echarts的大数据可视化,echarts纯粹的js实现的图表工具.高速开发的过程例如以下: 1.引入echarts的依赖js库 <script type= ...

  10. Tomcat的性能与最大并发配置

    当一个进程有 500 个线程在跑的话,那性能已经是很低很低了.Tomcat 默认配置的最大请求数是 150,也就是说同时支持 150 个并发,当然了,也可以将其改大. 当某个应用拥有 250 个以上并 ...