<!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. 数学图形(1.47)贝塞尔(Bézier)曲线

    贝塞尔曲线又称贝兹曲线或贝济埃曲线,是由法国数学家Pierre Bézier所发现,由此为计算机矢量图形学奠定了基础.它的主要意义在于无论是直线或曲线都能在数学上予以描述. 上一节讲的是高次方程曲线, ...

  2. Linux下的串口编程实例

    //串口相关的头文件  #include<stdio.h>      /*标准输入输出定义*/  #include<stdlib.h>     /*标准函数库定义*/  #in ...

  3. 解决在非Activity中使用startActivity

    错误提示信息: Caused by: android.util.AndroidRuntimeException: Calling startActivity() from outside of an ...

  4. Binary Tree Level Order Traversal II leetcode java

    题目: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from ...

  5. Android 混合式开发AppCan介绍

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

  6. wifidog 源码初分析（1）-转

    wifidog 的核心还是依赖于 iptables 防火墙过滤规则来实现的,所以建议对 iptables 有了了解后再去阅读 wifidog 的源码. 在路由器上启动 wifidog 之后,wifid ...

  7. Chrome中的哪些端口是限制使用的？

      The following is a list of all of the restricted ports on Chrome: 1, // tcpmux 7, // echo 9, // di ...

  8. 【Python】使用geopy由地址找经纬度等信息

    代码: from geopy.geocoders import Nominatim geolocator = Nominatim() location = geolocator.geocode(&qu ...

  9. 解剖 CPU

    http://www.ruanyifeng.com/blog/2010/11/cpu_autopsy.html 有一个瑞典 Lund 大学物理学博士生,就真的这么干了,还把照片放到网上.我们知道,CP ...

  10. 获取oracle 随机数

    http://www.cnblogs.com/lgzslf/archive/2008/11/29/1343685.html select substr(dbms_random.random,2,2) ...