-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwidth的区别.html
165 lines (149 loc) · 6.77 KB
/
width的区别.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
当前宽度为：<span id="nwidth"></span>
<table width="760" height="180" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" style="BORDER-COLLAPSE: collapse">
<tr>
<th>
#
</th>
<th>
javascript
</th>
<th>
jquery
</th>
<th>
计算
</th>
</tr>
<tr>
<td>
offsetWidth/outerWidth
</td>
<td id="offw">
0
</td>
<td id="outerw">
0
</td>
<td>
当前宽度 - margin
</td>
</tr>
<tr>
<td>
clientWidth/innerWidth
</td>
<td id="cliw">
0
</td>
<td id="innerw">
0
</td>
<td>
当前宽度 - margin - border
</td>
</tr>
<tr>
<td>
width/width()
</td>
<td id="swidth">
0
</td>
<td id="qwidth">
0
</td>
<td>
当前宽度 - margin - border - padding
</td>
</tr>
<tr>
<td>
scrollWidth
</td>
<td id="scrw">
0
</td>
<td >
0
</td>
<td >
当前宽度 - margin - border + 溢出宽度
</td>
</tr>
</table>
<div style="border:8px solid #000;height:60px;padding:12px;margin:15px;background-color:green" id="divObj">
border:8px</br>
padding:12px</br>
margin:15px
</div>
<script type="text/javascript">
window.onresize=function(){
document.getElementById("nwidth").innerHTML = $(document).width();
var divObj = document.getElementById("divObj");
offw = document.getElementById("offw");
outerw =document.getElementById("outerw");
cliw =document.getElementById("cliw");
innerw =document.getElementById("innerw");
swidth =document.getElementById("swidth");
qwidth =document.getElementById("qwidth");
scrw =document.getElementById("scrw");
//-------------------offset和outer
var dOffsetWidth = divObj.offsetWidth;//返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
var $dOffsetWidth = $(divObj).outerWidth(false);//参数为true，包括外边距
var dOffsetHeight = divObj.offsetHeight;//返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
var $dOffsetHeight = $(divObj).outerHeight(false);//参数为true，包括外边距
offw.innerHTML =dOffsetWidth +"px";
outerw.innerHTML =$dOffsetWidth +"px";
//-------------------client
var dClientWidth = divObj.clientWidth;//返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
var $dClientWidth = $(divObj).innerWidth();
var dClientHeight = divObj.clientHeight;//返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
var $dClientHeight = $(divObj).innerHeight();
cliw.innerHTML =dClientWidth +"px";
innerw.innerHTML =$dClientWidth +"px";
//-------------------style
var dWidth = divObj.style.width;//返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
var $dWidth = $(divObj).width();//width(val)设置宽
var dHeight = divObj.style.height;//返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
var $dHeight = $(divObj).height();//height(val)设置高
swidth.innerHTML =dWidth ;
qwidth.innerHTML =$dWidth +"px";
//-------------------scroll
var dscrollWidth = divObj.scrollWidth;//返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
var dscrollHeight = divObj.scrollHeight;//返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
scrw.innerHTML =dscrollWidth +"px";
var js_info = ("dOffsetWidth:"+dOffsetWidth+",dOffsetHeight:"+dOffsetHeight+",dClientWidth:"+dClientWidth+",dClientHeight:"+dClientHeight+",dWidth:"+dWidth+",dHeight:"+dHeight+",dscrollWidth:"+dscrollWidth+",dscrollHeight:"+dscrollHeight);
var jq_info = ("$dOffsetWidth:"+$dOffsetWidth+",$dOffsetHeight:"+$dOffsetHeight+",$dClientWidth:"+$dClientWidth+",$dClientHeight:"+$dClientHeight+",$dWidth:"+$dWidth+",$dHeight:"+$dHeight);
// console.log(js_info);
// console.log(jq_info);
/*
注意：offsetWidth(offsetHeight)与style.width(style.height)的区别
1. style.height 返回的是字符串，如28px，offsetWidth返回的是数值28，如果需要对取得的值进行计算，用offsetWidth比较方便;如果拿到offsetWidth设置style.left的值，需加'px'。
2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性
3. style.height的值需要事先定义，否则取到的值为空。而且必须要定义在html里，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。
*/
/*
总结：
1、通过style.width(style.height)或者jQuery的$(divObj).width()/$(divObj).height()获取/设置元素的宽高
2、若要获取元素包含边框的宽度，则可通过divObj.offsetWidth/divObj.offsetHeight或jQuery的$(divObj).outerWidth(false)/$(divObj).outerHeight(false)获取
3、通过$(divObj).outerWidth(true)/$(divObj).outerHeight(true)获取带外边距的宽度
4、通过$(divObj).innerWidth()/$(divObj).innerHeight()获取不包含边框、不包含外边距的宽度
*/
}
</script>
</body>
</html>