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. GConf error:Failed to contact configuration server

    Linux系统运行一直正常,但是图形界面使用root账号登录时遇到下面错误,第一次遇到这么怪异的状况 具体错误信息如下所示: GConf error:Failed to contact configu ...

  2. oracle数据库rman备份计划及恢复

    1.rman完全恢复的前提条件:历史的datafile,controlfile和spfile备份,加上完整的archivelog和完好的redolog. 2.rman备份脚本: a.RMAN 0级备份 ...

  3. python版本升级

    python 2.7.11,下载链接  https://www.python.org/ftp/python/2.7.11/Python-2.7.11.tgz,如下载速度太慢可在豆瓣pypi搜索下载ht ...

  4. 教你看懂 OpenStack 日志 - 每天5分钟玩转 OpenStack(29)

    instance 从创建到删除的整个生命周期都是由 Nova 管理的. 后面各小节我们以 instance 生命周期中的不同操作场景为例,详细分析 Nova 不同组件如何协调工作,并通过日志分析加深大 ...

  5. shell parameter expansitions

    type testtype -a test math calculate:echo $((1+2*3)) parameter expansition:bash-4 introduced feature ...

  6. hyper容器网络相关源码分析

    一.网络初始化 1.hyperd/daemon/daemon.go func NewDaemon(cfg *apitypes.HyperConfig) (*Daemon, error) .... 调用 ...

  7. Linux下oracle环境变量无效问题

    今天在维护oracle数据库时,查看监听的状态,执行 #lsnrctl status 报错: -bash:lsnrctl:command not found.以前并不会这样,仔细想了一下,问题找到了, ...

  8. Hibernate内测总结

    1.在Hibernate中,以下关于主键生成器说法错误的是( ). A.increment可以用于类型为long.short或byte的主键 B.identity用于如SQL Server.DB2.M ...

  9. TCP/IP协议中网关和子网掩码概念

    网关: 不同网段的IP是不能直接互通的,需要一个设备来转发,这个设备就是网关,一般就是路由器,那么路由器的地址就是网关地址. 比如192.168.2.31要往192.168.3.31发送一条消息,他们 ...

  10. StackExchange.Redis 使用-配置

    Configurationredis有很多不同的方法来配置连接字符串 , StackExchange.Redis 提供了一个丰富的配置模型,当调用Connect 或者 ConnectAsync 时需要 ...