js获取页面元素高度、宽度

网页可见区域宽: document.body.clientWidth; 
网页可见区域高: document.body.clientHeight; 
网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 
网页可见区域高: document.body.offsetHeight (包括边线的宽); 
网页正文全文宽: document.body.scrollWidth; 
网页正文全文高: document.body.scrollHeight; 
网页被卷去的高(ff):document.body.scrollTop; 
网页被卷去的高(ie): document.documentElement.scrollTop; 
网页被卷去的左:document.body.scrollLeft; 
网页正文部分上:window.screenTop; 
网页正文部分左:window.screenLeft; 
某个元素的宽度:obj.offsetWidth;
某个元素的高度:obj.offsetHeight;
屏幕分辨率的高:"+  window.screen.height;  
屏幕分辨率的宽:"+  window.screen.width;  
屏幕可用工作区高度:"+  window.screen.availHeight;  
屏幕可用工作区宽度:"+  window.screen.availWidth;  
某个元素的上边界到body最顶部的距离:obj.offsetTop;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offsetLeft;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offsetTop(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offsetLeft(在元素的包含元素含滚动条的情况下)
 
scrollTop, scrollLeft
设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的< body> 或< html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个< iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性。
onresize 事件会在窗口或框架被调整大小时发生。
window.onresize = function () {}

JavaScript onscroll 事件

当浏览器滚动条滚动时会触发 onscroll 事件,通常情况下指上下滚动条滚动。

需要注意的是,浏览器一旦检测到滚动条发生滚动,就可以触发 onscroll 事件,而无需等到滚动行为结束。

window.onscroll=function(){}

onscroll事件,onresize事件的更多相关文章

  1. 关于 Chrome 浏览器中 onresize 事件的 Bug

    我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...

  2. 窗口事件onresize

    在做自适应布局的时候,我们常常需要根据窗口不同的分辨率给出不同布局和样式,今天说的onresize便能帮我们实现这一效果. onresize事件在窗口或者框架的大小发生改变的时候会被调用,下面我们用一 ...

  3. window.onresize事件在vue项目中的应用

    //vue页面<template> <div id='echart'> 报表 </div> </template> <script> exp ...

  4. window.onresize 事件笔记

     1.浏览器尺寸变化响应事件 : window.onresize = function(){....} 这里须要注意的是,onresize响应事件处理中.获取到的页面尺寸參数是变更后的參数. // ...

  5. window.onresize事件

    定义和用法 onresize 事件会在窗口或框架被调整大小时发生. 语法 In HTML: <element onresize="SomeJavaScriptCode"> ...

  6. JavaScript-4.5 事件大全,事件监听---ShinePans

    绑定事件 <input type="bubtton" onclick="javascript:alert('I am clicked');"> 处理 ...

  7. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  8. HTML 事件(一) 事件的介绍

    本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...

  9. HTML 事件(二) 事件的注册与注销

    本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...

随机推荐

  1. linux fdisk命令使用

    fdisk 对硬盘及分区的操作,进入fdisk 对硬盘操作阶段 我们可以对硬盘进行分区操作,前提是您把fdisk -l 弄明白了:通过fdisk -l ,我们能找出机器中所有硬盘个数及设备名称:比如上 ...

  2. InfluxDB学习之InfluxDB的HTTP API查询操作

    在 InfluxDB学习 的上一篇文章:InfluxDB学习之InfluxDB的HTTP API写入操作 中,我们介绍了使用InfluxDB的HTTP API进行数据写入操作的过程,本文我们再来介绍下 ...

  3. Win Server 2008 RD案例:Client通过Server的浏览器上网

    一.简介 RD是Windows Server远程桌面服务,可以实现从客户端运行服务器上的软件.首先在Server安装软件,设置能远程访问的应用和账号,并且创建.rdp快捷方式文件,然后Client打开 ...

  4. 云与备份之(1):VMware虚机备份和恢复

    本系列文章会介绍云与备份之间的关系,包括: (1)VMware 虚机备份和恢复 (2)KVM 虚机备份和恢复 (3)云与备份 (4)OpenStack 与备份 (5)公有云与备份 1. 与备份有关的V ...

  5. 单元测试实战 - Junit测试

    一.对加法函数进行测试 1.实例化被测单元(方法):类名 实例名=new 类名([参数]) 2.调用被测单元,对比预期值和输出值(实际值): 在没有junit测试工具的情况下,我们要进行如下的测试代码 ...

  6. 【2016-10-16】【坚持学习】【Day7】【建造者模式】

    建造者模式: 一个复杂的对象由多个分部件组成.一个复杂对象 class Product { private string partA; //定义部件,部件可以是任意类型,包括值类型和引用类型 priv ...

  7. 三维网格补洞算法(Poisson Method)

    下面介绍一种基于Poisson方程的三角网格补洞方法.该算法首先需要根据孔洞边界生成一个初始化补洞网格,然后通过法向估算和Poisson方程来修正补洞网格中三角面片的几何形状,使其能够适应并与周围的原 ...

  8. P1774 最接近神的人_NOI导刊2010[树状数组 逆序对 离散化]

    题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门上方用古代文写着“神的殿堂”.小FF猜想里面应该就有王室的 ...

  9. 洛谷P2412 查单词 [trie树 RMQ]

    题目背景 滚粗了的HansBug在收拾旧英语书,然而他发现了什么奇妙的东西. 题目描述 udp2.T3如果遇到相同的字符串,输出后面的 蒟蒻HansBug在一本英语书里面找到了一个单词表,包含N个单词 ...

  10. CodeForces 485C Bits[贪心 二进制]

    C. Bits time limit per test1 second memory limit per test256 megabytes inputstandard input outputsta ...