图解offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset等

最新推荐文章于 2024-09-11 11:10:43 发布

原创

最新推荐文章于 2024-09-11 11:10:43 发布 · 7.4k 阅读

21 ·

CC 4.0 BY-SA版权

本文通过编写JavaScript代码，测试了在不同浏览器（IE7~IE11、Chrome、Firefox）中DOM元素的offsetWidth、clientWidth、scrollWidth等属性，以及window对象的outerWidth、innerWidth、pageXOffset等属性，并对比了有无滚动条时的测试结果。

测试浏览器：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