获取浏览器窗口的可视区域高度和宽度

  1. document.body.clientWidth ==> BODY对象宽度
  2. document.body.clientHeight ==> BODY对象高度
  3. document.documentElement.clientWidth ==> 可见区域宽度
  4. document.documentElement.clientHeight ==> 可见区域高度
  5.  
  6. document.body.clientWidth ==> 网页可见区域宽
  7. document.body.clientHeight ==> 网页可见区域高
  8. document.body.offsetWidth ==> 网页可见区域宽(包括边线的宽)
  9. document.body.offsetHeight ==> 网页可见区域高(包括边线的高)
  10. document.body.scrollWidth ==> 网页正文全文宽document.body.scrollHeight ==> 网页正文全文高
  11. document.body.scrollTop ==> 网页被卷去的高
  12. document.body.scrollLeft ==> 网页被卷去的左
  13. window.screenTop ==> 网页正文部分上
  14. window.screenLeft ==> 网页正文部分左
  15. window.screen.height ==> 屏幕分辨率的高
  16. window.screen.width ==> 屏幕可用工作区高度
  17. window.screen.availHeight ==> 屏幕可用工作区高度
  18. window.screen.availWidth ==> 屏幕可用工作区宽度

jquery获取

  1. $(window).height()   //浏览器时下窗口可视区域高度
  2. $(document).height()  //浏览器时下窗口文档的高度
  3. $(document.body).height()      //浏览器时下窗口文档body的高度
  4. $(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
  5. $(window).width()   //浏览器时下窗口可视区域宽度
  6. $(document).width() //浏览器时下窗口文档对于象宽度
  7. $(document.body).width()      //浏览器时下窗口文档body的高度
  8. $(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding
  1. HTML精确定位: scrollLeft,scrollWidth,clientWidth,offsetWidth
  2. scrollHeight: 获取对象的滚动高度。
  3. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
  4. scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
  5. scrollWidth: 获取对象的滚动宽度
  6. offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
  7. offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
  8. offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
  9. event.clientX 相对文档的水平座标
  10. event.clientY 相对文档的垂直座标
  11. event.offsetX 相对容器的水平坐标
  12. event.offsetY 相对容器的垂直坐标
  13. document.documentElement.scrollTop 垂直方向滚动的值
  14. event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
  1. alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
  2. alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

参考

js获取网页和屏幕高度的更多相关文章

  1. js获取网页的各种高度

    原文:js获取网页的各种高度 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: documen ...

  2. js获取网页中宽高度集合

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  3. js获取网页的各种高度和宽度

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  4. JS获取网页属性包括宽、高等

    JS获取网页属性包括宽.高等. function getInfo()  { // www.jbxue.com var s = "";  s += " 网页可见区域宽:&q ...

  5. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  6. JS获取网页宽高方法集合

    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...

  7. 使用js获取页面的各种高度

    使用js获取相关高度: 获取网页被滚动条卷去的高度——兼容写法: scrollHeight = documen.body.scrollTop || document.documentElement.s ...

  8. js技术要点---JS 获取网页源代码

    JS 获取网页源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html& ...

  9. JS获取各种宽度、高度的简单介绍:

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

随机推荐

  1. docker容器日志查看

    日志分两类,一类是 Docker 引擎日志:另一类是 容器日志. Docker 引擎日志 Docker 引擎日志 一般是交给了 Upstart(Ubuntu 14.04) 或者 systemd (Ce ...

  2. 使用注解@Slf4j简化Logger的初始化

    一.是不是厌倦了 private final static Logger logger = LoggerFactory.getLogger(Application.class); 的拷贝和修改? 二. ...

  3. Flutter 中SimpleDialog简单弹窗使用

    import 'package:flutter/material.dart'; import 'dart:async'; enum Option { A, B, C } class SimpleDia ...

  4. Dart 变量、常量和命名规则

    /* Dart 变量: dart是一个强大的脚本类语言,可以不预先定义变量类型 ,自动会类型推导 dart中定义变量可以通过var关键字可以通过类型来申明变量 如: var str='this is ...

  5. centos7上安装mysql8(上)

    1.删除系统现存的mysql rpm -pa | grep mysql 2.卸载mysql组件 yum remove mysql-xxx-xxx- 3.删除mysql的配置文件,卸载不会自动删除配置文 ...

  6. AD域策略启动关机脚本不执行的注意事项

    其实主要是脚本路径的问题. 错误一: 直接使用右侧的添加按钮,添加了预控的本地路径.如上图第二行. 错误二: 直接使用右侧的添加按钮,添加了脚本的网络路径,如上图第三行. 正确的方法: 点击下方的显示 ...

  7. php 3.2 生成压缩文件,并下载

    public function zip_download() { $array = array( 'http://local.qki.com/site_upload/erweima/20190826/ ...

  8. NETTY option参数

    Channel配置参数 (1).通用参数 CONNECT_TIMEOUT_MILLIS :   Netty参数,连接超时毫秒数,默认值30000毫秒即30秒. MAX_MESSAGES_PER_REA ...

  9. Win10安装Golang

    首先去这个网站下载Golang的安装包:https://studygolang.com/dl 因为我的系统是Win10专业版64位,所以我选择了对应的Windows的安装包进行下载: 下载好安装包之后 ...

  10. bootstrap-table+Django: 服务端分页

    分页方式: bootstrap-table提供两种分页方式,client和server,即客户端和服务端分页: 特点: client端分页:后台返回所有数据,前台翻页时不再请求后台. server端分 ...