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. MongoDB学习笔记~大叔框架实体更新支持N层嵌套~递归递归我爱你!

    回到目录 递归递归我爱你!只要你想做,就一定能成功! 从一到二,从二到三,它是容易的,也是没什么可搞的,或者说,它是一种流水线的方式,而从三到十,从十到百,它注定要有一个质的突破,否则,它会把你累死, ...

  2. 【转】HiveQL:对数据定义的学习

    1.Hive中的数据库: 它是表的一个目录或者命名空间,用来避免表命名冲突,我们通常使用数据库来将生产表组织成逻辑组. 基本命令: (1)创建一个数据库(如果不存在该数据库): create data ...

  3. PHP实现堆排序

    经验 工作了,面试我工作这家公司时被技术面打击得不行,因为自己的数据结构等基础学得实在太差,虽然原来是想做设计师的说...不过看在PHP写得还凑合的份上能来实习了,但还是决心恶补一下基础. 其实自己之 ...

  4. 烂泥:dnsmasq搭建简易DNS服务器

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 今天我们来介绍一个比较简单的DNS服务器dnsmasq.这款软件,已经被我成功使用到公 ...

  5. Windows 10 安装双系统 CentOS 7

    系统环境:Windows 10 && CentOS 7 准备工具: ●CentOS7 官网下载地址:https://wiki.centos.org/Download (注意: i386 ...

  6. Log4J基础详解及示例大全

    去年这个时候,为做软件工程的大作业就详细学过Log4J的用法了,时隔一年想要在新的项目中好好使用一下的时候,发现几乎全忘了,悲催啊-- 再上网查资料,总是不能找到一篇符合我的口味,拿来就能轻松上手,方 ...

  7. Ubuntu nginx 配置404错误页面

    1.创建自己的404.html页面: 2.更改nginx.conf在http定义区域加入: /etc/nginx# vim nginx.conf 下添加 fastcgi_intercept_error ...

  8. openstack学习(三)创建虚拟机

    1 , 用图形管理界面创建虚拟机 #virt-manager    //打开图形管理界面 配置文件一般存放于/etc/libvirt/qemu 然后按照提示一步步安装即可,网络连接方式改为桥接 导出创 ...

  9. Bean生命周期及BeanFactory

    1.spring通过BeanFactory灵活配置.管理bean,Spring对管理的bean没有任何特别的要求,完全支持对POJO的管理: 2.BeanFactory有个ApplicationCon ...

  10. mybatis传入多个参数

    一.单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList&q ...