js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总，测试浏览器：ie7~ie11、chrome 和 firefox等。
一、测试1：无滚动条时，dom对象的offsetWidth、clientWidth和scrollWidth
（1）测试代码
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
*{margin: 0;padding: 0;}
body{font: 12px/2 Arial;background-color: #ccc;padding: 20px;}
#b1{width: 530px;height: 320px;background-color: #fff;position: relative;}
#b2{width: 220px;height: 130px;background-color: orange;border: 10px solid #085A90;padding: 10px;position: relative;left: 140px;top: 90px;}
</style>
</head>
<body>
<div id="b1"><div id="b2"></div></div>
<script>
window.onload = function(){
var oB2 = document.getElementById('b2'); console.log("offsetWidth="+oB2.offsetWidth, "offsetHeight="+oB2.offsetHeight);
console.log("clientWidth="+oB2.clientWidth, "clientHeight="+oB2.clientHeight);
console.log("offsetLeft="+oB2.offsetLeft, "offsetTop="+oB2.offsetTop);
console.log("scrollWidth="+oB2.scrollWidth, "scrollHeight="+oB2.scrollHeight);
console.log("scrollLeft="+oB2.scrollLeft, "scrollTop="+oB2.scrollTop);
}
</script>
</body>
</html>
（2）测试结果
IE7下，scrollWidth = 20，scrollHeight = 34
（3）图解结果
二、测试2：有滚动条时，dom对象offsetWidth、clientWidth 和 scrollWidth
（1）测试代码
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
*{margin: 0;padding: 0;}
body{font: 12px/2 Arial;background-color: #ccc;padding: 20px;}
#b1{width: 300px;height: 220px;background-color: #fff;position: relative;overflow: auto;border: 10px solid #999;padding: 10px;}
#b2{width: 220px;height: 330px;background-color: orange;border: 10px solid #085A90;padding: 10px;position: relative;left: 140px;top: 90px;}
</style>
</head>
<body>
<div id="b1"><div id="b2"></div></div>
<script>
window.onload = function(){
var oB1 = document.getElementById('b1');
console.log("offsetWidth="+oB1.offsetWidth, "offsetHeight="+oB1.offsetHeight);
console.log("clientWidth="+oB1.clientWidth, "clientHeight="+oB1.clientHeight);
console.log("offsetLeft="+oB1.offsetLeft, "offsetTop="+oB1.offsetTop);
console.log("scrollWidth="+oB1.scrollWidth, "scrollHeight="+oB1.scrollHeight);
console.log("scrollLeft="+oB1.scrollLeft, "scrollTop="+oB1.scrollTop);
}
</script>
</body>
</html>
（2）测试结果
这里我们需要读取外层带滚动条的 div#b1 的值。ie7~ie11、chrome 和 firefox 结果一致，如下：
（3）图解结果
三、测试3：window对象的 outerWidth、innerWidth、pageXOffset 和 screenLeft（screenX）
（1）测试代码
<script>
window.onload = function(){
console.log("innerWidth="+window.innerWidth, "innerHeight=" + window.innerHeight);
console.log("outerWidth="+window.outerWidth, "outerHeight=" + window.outerHeight);
console.log("pageXOffset="+window.pageXOffset, "pageYOffset=" + window.pageYOffset);
console.log("screenX="+window.screenX, "screenY=" + window.screenY);
console.log("screenLeft="+window.screenLeft, "screenTop=" + window.screenTop);
}
</script>
（2）图解结果（不同浏览器下，console 输出与下图部分有不同）
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别的更多相关文章
- jQuery中【width(),innerWidth(),outerWidth()】
这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...
- 关于js中for in和foreach in的区别
js 中for in 和foreach in的区别 两个的作用都用来遍历对象,但为什么有了for in语句了还要foreach in语句呢,后来看了下foreach in开发的文档,foreach i ...
- js中加“var”和不加“var”的区别
JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill&q ...
- C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？
C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...
- JS中构造函数和普通函数有什么区别
JS中构造函数有普通函数有什么区别? 1.一般规则 构造函数都应该以 一个大写字母开头,eg: function Person(){...} 而非构造函数则应该以一个小写字母开头,eg: functi ...
- js中数组遍历for与for in区别(强烈建议不要使用for in遍历数组)
js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //for ...
- js中NAN、NULL、undefined的区别
NaN:保留字(表明数据类型不是数字) undefined:对象属性或方法不存在,或声明了变量但从未赋值.即当你使用了对象未定的属性或者未定义的方法时或当你声明一个变量,但你确从未对其进行赋值,便对其 ...
- js中event的target和currentTarget的区别
js中的event对象包含很多有用的信息 target:触发事件的元素. currentTarget:事件绑定的元素. 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: ...
- JS中的substring和substr函数的区别
1. 在JS中, 函数声明: stringObject.substring(start,stop) start是在原字符串检索的开始位置,stop是检索的终止位置,返回结果中不包括stop所指字符. ...
随机推荐
- 提交任务到spark（以wordcount为例）
1.首先需要搭建好hadoop+spark环境,并保证服务正常.本文以wordcount为例. 2.创建源文件,即输入源.hello.txt文件,内容如下: tom jerry henry jim s ...
- 浅谈Linux进程管理
一 查看系统进程 在linux中,查看系统进程的命令为ps,常用格式为如下两个: (1)ps aux:unix格式查看系统进程 (2)ps -le:linux格式查看系统进程 一般地,ps aux更 ...
- 使用Python3.6的标准GUI库tkinter快速创建GUI应用程序
Python 提供了多个图形开发界面的库,几个常用 Python GUI 库如下: Tkinter: Tkinter 模块(Tk 接口)是 Python 的标准 Tk GUI 工具包的接口 .Tk 和 ...
- 用Python构造ARP请求、扫描、欺骗
目录 0. ARP介绍 1. Scapy简述 2. Scapy简单演示 2.1 安装 2.2 构造包演示 2.2.1 进入kamene交互界面 2.2.2 查看以太网头部 2.2.3 查看 ICMP ...
- Spring Data JPA 梳理 - JPA是什么
总结: JPA是java的标准,不是Spring的标准 java标准中一般通过Meta-INF文件规范开发层面的事情,JPA也不例外,使用persistence.xml JPA定义了Entity 到 ...
- Mycat 关键特性
关键特性 支持SQL92标准 支持MySQL.Oracle.DB2.SQL Server.PostgreSQL等DB的常见SQL语法 遵守Mysql原生协议,跨语言,跨平台,跨数据库的通用中间件代理. ...
- 跟文档学习next.js
前言:Next.js 是一个轻量级的 React 服务端渲染应用框架. Next.js中文点击这里 Next.js中文站Github点击这里 新建文件夹安装它: npm install --save ...
- 两小无猜的爱恨情仇--java =+和+=揭秘
故事背景 当一个人问另一个人“敢不敢”的时候,另一个人必须说“敢”,这就是游戏的规则.小男孩朱利安和小女孩苏菲的相遇即开始于这样一场孩童的闹剧,一个精美的铁盒子就是他们游戏的见证.说脏话,扰乱课堂,在 ...
- linux分区与挂载
分区是将一个硬盘驱动器分成若干个逻辑驱动器,分区是把硬盘连续的区块当做一个独立的磁盘使用.分区表是一个硬盘分区的索引,分区的信息都会写进分区表.通常情况下,为磁盘分区通常使用fdisk,它是对基于MB ...
- 【JZOJ5248】花花的聚会
Description 注意测试数据中道路是 到 的单向道路,与题面恰好相反. Input Output Sample Input 7 7 1 3 1 2 6 7 3 6 3 5 3 4 7 2 3 ...