• document.body.clientWidth ==> BODY对象宽度
  • document.body.clientHeight ==> BODY对象高度
  • document.documentElement.clientWidth ==> 可见区域宽度
  • document.documentElement.clientHeight ==> 可见区域高度
  • 网页可见区域宽: document.body.clientWidth
  • 网页可见区域高: document.body.clientHeight
  • 网页可见区域宽: document.body.offsetWidth (包括边线的宽)
  • 网页可见区域高: document.body.offsetHeight (包括边线的高)
  • 网页正文全文宽: document.body.scrollWidth
  • 网页正文全文高: document.body.scrollHeight
  • 网页被卷去的高: document.body.scrollTop
  • 网页被卷去的左: document.body.scrollLeft
  • 网页正文部分上: window.screenTop
  • 网页正文部分左: window.screenLeft
  • 屏幕分辨率的高: window.screen.height
  • 屏幕分辨率的宽: window.screen.width
  • 屏幕可用工作区高度: window.screen.availHeight
  • 屏幕可用工作区宽度: window.screen.availWidth
  • // 部分jQuery函数
  • $(window).height()  //浏览器时下窗口可视区域高度
  • $(document).height()    //浏览器时下窗口文档的高度
  • $(document.body).height()      //浏览器时下窗口文档body的高度
  • $(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
  • $(window).width()  //浏览器时下窗口可视区域宽度
  • $(document).width()//浏览器时下窗口文档对于象宽度
  • $(document.body).width()      //浏览器时下窗口文档body的高度
  • $(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding
  • HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
  • scrollHeight: 获取对象的滚动高度。
  • scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
  • scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
  • scrollWidth:获取对象的滚动宽度
  • offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
  • offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
  • offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
  • event.clientX 相对文档的水平座标
  • event.clientY 相对文档的垂直座标
  • event.offsetX 相对容器的水平坐标
  • event.offsetY 相对容器的垂直坐标
  • document.documentElement.scrollTop 垂直方向滚动的值
  • event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

0.0

js获取宽高的更多相关文章

  1. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  2. js 和 jquery 里面几个获取宽高的调查

    罗列下 js 和 jquery 里面获取宽高的方法: obj.offsetWidth = $obj.outerWidth()  // offsetWidth obj.clientWidth = obj ...

  3. 17.在自适应屏幕里通过JQ来获取宽高并赋给需要的

    在自适应屏幕里通过JQ来获取宽高并赋给需要的div. var height = document.documentElement.clientHeight; $(window).height();(同 ...

  4. js/jq宽高的理解与运用

    document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftd ...

  5. js各种宽高(1)

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  6. DOM中获取宽高、位置总结

    原生JS 一.文档.窗口的宽高和位置 // 获取屏幕的宽高 window.screen.height | window.screen.width // 屏幕可用工作区宽高 window.screen. ...

  7. js 浏览器 宽高 各种

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度   if (window.innerWidth)   winWidth = window.innerWidth;   else if ((do ...

  8. Js获取宽高度的归纳集锦总结

    首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种.属性根据不同的兼容性也分为五种 window.innerWidth //除去菜单栏的窗口宽度,与浏览器相关 window.inner ...

  9. Js获取宽高度的归纳总结

    首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种. window.innerWidth //除去菜单栏的窗口宽度 window.innerHeight//除去菜单栏的窗口高度 win ...

随机推荐

  1. java 接口默认修饰符问题

    package test; public interface InterfaceTest { void todo();} /** * 以下是反编译的内容,接口里的方法默认都是public的.abstr ...

  2. Eclipse中将含有图片资源的项目打包成jar文件

    前言: 最近学了GUI编程和UDP协议,心血来潮想做一个局域网内的聊天软件,前期都还算顺利,直到后来将整个项目打包成jar文件时遇到了困难.如图: 自己设置的图标不见了,但是也没有默认的图标,说明图片 ...

  3. 在ASP.NET Core中使用Apworks快速开发数据服务

    不少关注我博客的朋友都知道我在2009年左右开发过一个名为Apworks的企业级应用程序开发框架,旨在为分布式企业系统软件开发提供面向领域驱动(DDD)的框架级别的解决方案,并对多种系统架构风格提供支 ...

  4. ng自定义一个过滤器

    ng允许我们自定义指令 下面来我们自己来定义一个过滤指令:filter,返回一个函数的形式 filter(name,callback(){//name:过滤器的名字,callback:匿名函数 ret ...

  5. 老李分享:接电话扩展之uiautomator 2

    主要的类就是上面的PhoneReceiver广播接收者.来电的时候,我们记录下电话号码,等该来电挂断以后,立即回拨给对方.配置文件如下: <?xml version="1.0" ...

  6. 4日6日--ES5新增数组方法

    forEach使用的函数调用,所以占内存比较大,不如定长for循环和迭代for循环 1.通过forEach将数组中的元素逐个表示出来(遍历方法,读取操作). 2.通过map将原数组中的元素进行算数运算 ...

  7. VS窗体选择BackGroupImage属性报错:已添加具有相同键的项

    高墙我今天第一次遇见这个问题.既然说是"已添加具有相同键的项."那我自然地认为会不会是文件夹哪里命名了两个相同的文件名.然后在这个Exception上越走越远. 好了不说废话.出现 ...

  8. C#中的ArrayList

    ArrayList非常类似于数组,也有人称它为数组列表,ArrayList可以动态维护 提示: 和数组相似,ArrayList中存储的数据称为元素,ArrayList可以保存的元素数就是ArrayLi ...

  9. 美团点评DBProxy读写分离使用说明

    目的 因为业务架构上需要实现读写分离,刚好前段时间美团点评开源了在360Atlas基础上开发的读写分离中间件DBProxy,关于其介绍在官方文档已经有很详细的说明了,其特性主要有:读写分离.负载均衡. ...

  10. linux sed命令就是这么简单

    概述 sed命令是一个面向字符流的非交互式编辑器,也就是说sed不允许用户与它进行交互操作.sed是按行来处理文本内容的.在shell中,使用sed来批量修改文本内容是非常方便的. sed命令的选项 ...