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. C++ - 静态成员函数

    c++中静态成员函数属于整个类, 而不是某个对象,因此不需要创建对象就可以访问 1.出现在类体外的函数定义不能指定关键字static:2.静态成员之间可以相互访问,包括静态成员函数访问静态数据成员和访 ...

  2. Linux终端打印命令使用介绍

    常用linux打印命令 日常使用中或shell脚本中linux终端打印命令有echo和printf.  echo命令 功能说明:显示文字.语 法:echo [-ne][字符串]或 echo [--he ...

  3. EF高级应用

    UpdateSourceTrigger     NumberTextbox         参考 Finally! Entity Framework working in fully disconne ...

  4. [转]ASP.NET Core 之 Identity 入门(一)

    本文转自:http://www.cnblogs.com/savorboard/p/aspnetcore-identity.html 前言 在 ASP.NET Core 中,仍然沿用了 ASP.NET里 ...

  5. LINQ语句中的.AsEnumerable() 和 .AsQueryable()的区别

    LINQ语句中的.AsEnumerable() 和 .AsQueryable()的区别 在写LINQ语句的时候,往往会看到.AsEnumerable() 和 .AsQueryable() .例如: s ...

  6. iOS关于XML解析请求数据

    XML数据的请求: 和json请求几乎一样,只有请求参数修改为xml即可: AFHTTPSessionManager *manager = [AFHTTPSessionManager manager] ...

  7. windows下的NodeJS安装

    1.登录官网 http://nodejs.org ,install 下载安装包.. 2.安装过程基本直接“NEXT”就可以了. 3.安装完成后可以使用cmd(win+r然后输入cmd进入)测试下是否安 ...

  8. mysql : utf8mb4 的问题

    微信呢称和QQ呢称上有很多火星文和emoji表情图片,这些数据,如果直接insert到mysql数据库,一般会报错,设置成utf8都不好使,必须改成utf8mb4编码,这二者的区别见: mysql u ...

  9. 几个ES6新特性

    ES6是JavaScript语言的下一代标准,已经在2015年6月正式发布了,因为ES6的第一个版本是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).本文主要讲述的是E ...

  10. title与alt的区别

    html中的title属性和alt属性让人有些混淆. 以前不知道有title这个属性,第一次用到它时,就和alt产生了混淆.一位朋友告诉我说,alt是图片img标签里用的,title是超链接里用的, ...