区分总结innerHeight与clientHeight、innerWidth与clientWidth、scrollLeft与pageXOffset等属性
window对象:
(1)innerHeight属性:窗口中文档显示区域的高度,不包括菜单栏、工具栏等部分。该属性可读可写。
IE不支持该属性,IE中body元素的clientHeight属性与该属性相同。
(2)innerWidth属性:窗口中文档显示区域的宽度,同样不包括边框。该属性可读可写。
IE不支持该属性,IE中body元素的clientWidth属性与该属性相同。
clientHeight与clientWidth属性是只读的。
另外,IE不支持outerWidth、outerHeight属性。
(3)pageXOffset属性:整数只读属性,表示文档向右滚动过的像素数。
IE不支持该属性,使用body元素的scrollLeft属性替代。
(4)pageYOffset属性:整数只读属性,表示文档向下滚动过的像素数。
IE不支持该属性,使用body元素的scrollTop属性替代。
兼容IE与DOM浏览器,如何获取窗口中文档显示区域的宽度及高度,使用?:条件语句,如下:
windows.innerWidth ? windows.innerWidth : document.body.clientWidth;
windows.innerHeight ? windows.innerHeight : document.body.clientHeight;
元素对象:
offsetLeft、offsetTop属性:获取元素相对于文档左上角的坐标位置。
区分总结innerHeight与clientHeight、innerWidth与clientWidth、scrollLeft与pageXOffset等属性的更多相关文章
- innerHeight与clientHeight、innerWidth与clientWidth、scrollLeft与pageXOffset等属性
区分innerHeight与clientHeight.innerWidth与clientWidth.scrollLeft与pageXOffset等属性 标签: innerheight clienthe ...
- 区分innerHeight与clientHeight、innerWidth与clientWidth、scrollLeft与pageXOffset等属性
window对象:(1)innerHeight属性:窗口中文档显示区域的高度,不包括菜单栏.工具栏等部分.该属性可读可写. IE不支持该属性,IE中body元素的clientHeight属性与 ...
- clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y clientHeight innerWidth...
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...
- innerHeight,clientHeight,offsetHeight,scrollWidth等的区别和用法
要理解这几个属性,首先要搞明白body,documentElement的区别 1.body是DOM对象里的body子节点,即<body>标签2.documentElement是整个节点树的 ...
- jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读
在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...
- style.left offsetLeft offsetwidth clientLeft clientWidth scrollLeft scrollWidth
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JavaScript操作DOM的那些坑
js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响 ...
- 雷哥带你走进Javascript
javascript复习笔记--------------------------------------------1.概念2.面向对象思想3.作用认识4.引入方式5.执行顺序 变量 1)声明方式 x ...
- clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & outerHeight
clientHeight & clientWidth & offsetHeight & offsetWidth MDN https://developer.mozilla.or ...
随机推荐
- C++的那些事:表达式与语句
表达式 1,应该把函数调用当作是一种运算符,这种运算符对参与运算的对象没有数量限制. 2,关于“左值(lvalue)”和“右值(rvalue)”可以做一个简单的归纳:当一个对象被用作右值的时候,用的是 ...
- 【bzoj3343】教主的魔法 分块
[bzoj3343]教主的魔法 2014年4月26日8092 Description 教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了 ...
- SQL脚本--有关压缩数据库日志
/*--压缩数据库的通用存储过程 压缩日志及数据库文件大小 因为要对数据库进行分离处理 所以存储过程不能创建在被压缩的数据库中 --邹建 2004.03(引用请保留此信息)--*/ /*--调用示例 ...
- Windows 7下搭建Jmeter测试环境
jmeter配置.安装 一. 工具描述 apache jmeter是100%的java桌面应用程序,它被设计用来加载被测试软件功能特性.度量被测试软件的性能.设计jmeter的初衷是测试web应用,后 ...
- ember.js:使用笔记5 使用view
在已经设置route的情况下,以table为例,可以如下设置,范围为对应的模版: App.TableView = Em.View.extend({ }); App.TableIndexView = E ...
- 精灵动画Animation对话框组成Idle动画的各精灵
精灵动画Animation对话框组成Idle动画的各精灵 1.3 精灵动画 场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状 ...
- jquery.validate.js的remote用法
<script> $(function(){ $("#myform").validate( { rules: { name:{required:true,rangele ...
- BZOJ3672 : [Noi2014]购票
设d[i]表示i到1的距离 f[i]=w[i]+min(f[j]+(d[i]-d[j])*v[i])=w[i]+d[i]*v[i]+min(-d[j]*v[i]+f[j]) 对这棵树进行点分治,每次递 ...
- 【BZOJ】1103: [POI2007]大都市meg
http://www.lydsy.com/JudgeOnline/problem.php?id=1103 题意:一棵n节点的树(1<=n<=250000),m条边(1<=m<= ...
- JQuery图形插件,Highcharts平滑线条处理方法
第一种:静态数据 $('#THChartDiv').highcharts({ chart: { type: 'spline' }, title: { text:过程线' }, xAxis: { tit ...