document.body.scrollTop等属性可以获取页面滚动距离等，但是此类属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，

所以一般为了兼容性都这样写 document.documentElement.scrollTop || document.body.scrollTop;以下document属性全部推荐这种写法.

网页可见区域宽： document.body.clientHeight;
网页可见区域高： 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

js获取页面的各种高度与宽度的更多相关文章

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

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

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

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

  3. JS - 获取页面滚动的高度

    document.documentElement.scrollTop||document.body.scrollTop

  4. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

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

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

  6. JS获取页面数据执行Ajax请求

    下面这个例子展示了如何使用js获取页面中元素的值,并且将这些值作为参数执行Ajax请求. $("#submit-task").bind("click", fun ...

  7. JS获取页面传过来的值

    利用JS获取页面的传值,此方法只适应Get传值. 获取页面之间的传值,在后台我们很容易获取,那我们在前台只利用JS怎么写呢? 在看代码之前你需要了解的 ① 参考:W3C Location 对象 Loc ...

  8. js获取页面所有搜索条件

    <div class="search">        产品简码:@Html.TextBox("ProCode", "")    ...

  9. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

随机推荐

  1. kaggle笔记

    roc曲线介绍:https://www.cnblogs.com/dlml/p/4403482.html one-hot encode: 1) Drop Categorical Variables 2) ...

  2. leecode刷题（27）-- 合并k个排序链表

    leecode刷题(27)-- 合并k个排序链表 合并k个排序链表 合并 k 个排序链表,返回合并后的排序链表.请分析和描述算法的复杂度. 示例: 输入: [ 1->4->5, 1-> ...

  3. 数据库oracle一些操作(MiTAC)

    oracle计算时间差函数: 两个Date类型字段:START_DATE,END_DATE,计算这两个日期的时间差(分别以天,小时,分钟,秒,毫秒): 天: ROUND(TO_NUMBER(END_D ...

  4. golang（1）：简介

    golang语言特性: 1. 垃圾回收 a. 内存自动回收,不需要开发人员管理内存,开发人员专注业务实现 b. 只需要new分配内存,不需要释放 2. 天然并发 a. 从语言层面支持并发,非常简单 b ...

  5. O012、Linux如何实现VLAN

    参考https://www.cnblogs.com/CloudMan6/p/5313994.html   LAN 表示 Local Area Network ,本地局域网,通常使用 Hub 或者 Sw ...

  6. postgres外部表

    在创建外部表的时候遇见: CREATE EXTENSION file_fdw;2018-12-21 17:32:23.822 CST [31237] ERROR:  could not open ex ...

  7. Web前端开发解耦1

    在网站建设的工作中,Web前端工程师占据着非常重要的位置,好的前端工程师保证了良好的网站优化以及友好的用户体验.今天佚站互联主要分享一下对于Web前端开发规范的一些见解. 学过面向对象编程的朋友应该都 ...

  8. QT5.9 QString和字符串转换的乱码问题

    QString转字符串的乱码: 先在头文件加入: //解决QString到char的中文乱码 #if _MSC_VER >= 1600 #pragma execution_character_s ...

  9. 001-CentOS 7系统搭建Rsyslog+LogAnalyzer解决交换机日志收

    日志功能对于操作系统是相当重要的,在使用中,无论是系统还是应用等等,出了任何问题,我们首先想到的便是分析日志,查找问题原因.自 CentOS 7 开始,我们的 CentOS 便开始使用 rsyslog ...

  10. PhpStorm中如何使用database工具，详细操作方法

    1.简介:   PhpStorm是一个轻量级且便捷的PHP IDE,其提供的智能代码补全,快速导航以及即时错误检查等功能大大提高了编码效率.它以其独特的开发便利性,短时间内赢得了大量PHPer的青睐. ...