您的位置：首页 > 其它

clientWidth clientHeight scrollWidth scrollHeight offsetWidth offsetHieght的区别

2013-03-12 18:53 501 查看

clientWidth:元素内容区的宽度加上左右padding的值，如果有滚动条，不包括滚动条的宽度

clientHieght: 元素内容区的高度加上上下padding的值，如果有滚动条，不包括滚动条的高度

clientLeft:元素左边框的宽度，如果没有边框，就是0

clientTop:元素上边框的宽度，如果没有边框，就是0

scrollWidth:元素的滚动宽度，不包括元素边框和滚动条宽度，即元素边框和滚动条之间的宽度加上延伸到元素外面的部分

scrollHeight:元素的滚动高度，不包括元素的边框盒滚动条宽度，即即元素边框和滚动条之间的高度加上延伸到元素外面的部分

scrollLeft:元素水平滚动的距离

scrollTop: 元素垂直滚动的距离

offsetWidth:元素从左边框到右边框的宽度

offsetHeight: 元素从上边框到下边框的高度

offsetLeft:元素到offsetParent的偏移量

offsetTop: 元素到offsetParent的偏移量

(关于offsetParent offsetLeft offsetTop请参阅《元素的offsetParent offsetLeft offsetTop属性》)

另外，FF中的window属性innerWidth innerHeight只的是显示文档的整个视窗的宽度和高度(即浏览器中除了工具栏，菜单栏，地址栏以外的部分)，而outerWidth outerHeight指的是整个浏览器窗口的宽度和高度，即文档视窗高度和宽度 + 工具栏，地址栏，菜单栏这些部分

以上的结论是通过下面测试代码得出：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>测试三</title>
<script type = "text/javascript" src = "myUtil.js"></script>
<script type = "text/javascript">
function test() {
myUtil.addEvent("div2", "scroll", function() {//绑定滚动事件
display();
});
display();
}
function display() {
var div1 = myUtil.byId("div1");//获取金色背景div框的引用
var str1 = getAll(div1);//获取div1的相关属性字符串
var div2 = myUtil.byId("div2");//获取银色背景的引用
var str2 = getAll(div2); //获取div2的相关属性字符串
var div3 = myUtil.byId("div3"); //获取显示框的引用
div3.innerHTML = "";
div3.innerHTML = "div1:<br />" + str1 + "div2:<br/>" + str2; //显示
}
function getAll(element) {
var str = "";
var clientWidth = element.clientWidth;
var clientHeight = element.clientHeight;
var clientLeft = element.clientLeft;
var clientTop = element.clientTop;
var scrollWidth = element.scrollWidth;
var scrollHeight = element.scrollHeight;
var scrollLeft = element.scrollLeft;
var scrollTop = element.scrollTop;
var offsetWidth = element.offsetWidth;
var offsetHeight = element.offsetHeight;
var offsetLeft = element.offsetLeft;
var offsetTop = element.offsetTop;
str += "clientWidth: " + clientWidth + " clientHeight: " + clientHeight + " clientLeft: " + clientLeft + " clientTop: " + clientTop + "<br />"
+ "scrollWidth: " + scrollWidth + " scrollHeight: " + scrollHeight + " scrollLeft: " + scrollLeft + " scrollTop: " + scrollTop + "<br />"
+ "offsetWidth: " + offsetWidth + " offsetHeight: " + offsetHeight + " offsetLeft: " + offsetLeft + " offsetTop: " + offsetTop + "<br />"
return str;
}

</script>
<style type = "text/css">
html {
margin: 0;
border:3px solid red;
padding: 0;

}
/*body的边框为橙色*/
body {
padding: 20px;
margin: 20px;
border: 1px solid orange;
}
/*蓝色边框div*/
#wrapper {
padding: 20px;
margin: 0;
border: 1px solid blue;
width: 700px;
}
/*红色边框，金色背景div*/
#div1 {
border: 3px solid red;
padding: 20px;
margin: 20px;
width: 100px;
height: 100px;
background: gold;

}
/*绿色边框，银色背景div*/
#div2 {
background: silver;
width: 200px;
height: 200px;
overflow: scroll;

padding: 20px;
border: 1px solid green;
margin-bottom: 20px;

}
/*蓝色背景div，是银色div的子框*/
#div2_1 {
background: blue;
width: 400px;
height: 400px;

}
/*黑色边框div，用来显示*/
#div3 {
border: 1px solid;
width: 600px;
height: 150px;
}
</style>
</head>
<body onload = "test()">
<div id = "wrapper">
<div id = "div1"></div>
<div id = "div2"><div id = "div2_1"></div></div>
<div id = "div3"></div>
</div>
</body>
</html>

测试页面如图:

测试代码点击下载:

源代码下载.rar

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航