請先 下載demo事例
下載後，請依次點擊div，仔細觀看彈出框裏面的內容，仔細比較一下，你就能看到區別。
不願意下載的童鞋也可以自己複製啊！
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello, World</title>
<link rel="stylesheet" href="static/css/aio.css" />
</head>
<body>
<div class="div1 box" id="div1" style="width:200px">我是div1<br/>點我看看我的類型</div>
<div class="div2 box" id="div2">我是div2<br/>點我看看我的類型</div>
<hr/>
<div class="div3 box" id="div3" style="width:200px">我是div3<br/>我有padding border width</div>
<div class="div4 box" id="div4">我是div4<br/>我有padding border width </div>
<hr/>
<div class="div5 box" id="div5" style="width:200px">我是div5<br/>你可以改變我的寬度</div>
<div class="div6 box" id="div6">我是div6<br/>但你改變不了我的寬度！嘻嘻</div>
<hr/>
<div class="div7 box" id="div7" style="width:200px">我是div7<br/>我的樣式在行間</div>
<div class="div8 box" id="div8">我是div8<br/>我的樣式在css裏面</div>
<script src="static/js/test.js"></script>
</body>
</html>/*!/css/style.scss*/
body {
background-color: #FFCCFF;
}
.box {
margin: 20px;
height: 200px;
display: inline-block;
background-color: blue;
vertical-align: top;
}
.div2 {
width: 200px;
}
.div3 {
padding: 5px;
border: 5px solid red;
}
.div4 {
padding: 5px;
width: 200px;
border: 5px solid red;
}
.div6 {
width: 200px;
}
.div8 {
width: 200px;
}
window.οnlοad=function() {
var odiv1 = document.getElementById('div1');
var odiv2 = document.getElementById('div2');
var odiv3 = document.getElementById('div3');
var odiv4 = document.getElementById('div4');
var odiv5 = document.getElementById('div5');
var odiv6 = document.getElementById('div6');
var odiv7 = document.getElementById('div7');
var odiv8 = document.getElementById('div8');
odiv1.onclick =function(){
var width = odiv1.style.width;
alert("div1寬度："+width+"\n"+"div1類型爲："+typeof(width));
console.log("div1寬度："+width+"\n"+"div1類型爲："+typeof(width));
}
odiv2.onclick =function(){
var width = odiv2.offsetWidth;
alert("div2寬度："+width+"\n"+"div2類型爲："+typeof(width));
console.log("div2寬度："+width+"\n"+"div2類型爲："+typeof(width));
}
odiv3.onclick =function(){
var width = odiv3.style.width;
alert("div3寬度："+width);
console.log("div3寬度："+width);
}
odiv4.onclick =function(){
var width = odiv4.offsetWidth;
alert("div4寬度："+width);
console.log("div4寬度："+width);
}
odiv5.onclick =function(){
odiv5.style.width = 300+'px';
}
odiv6.onclick =function(){
odiv6.offsetWidth = 300;
}
odiv7.onclick =function(){
var width = odiv7.style.width;
alert("div4寬度："+width);
console.log("div4寬度："+width);
}
odiv8.onclick =function(){
var width = odiv8.style.width;
alert("div4寬度："+width);
console.log("div4寬度："+width);
}
}| 區別 | style.width | offsetWidth |
| 類型區別 | string | number |
| 寬度區別 | 本身的div的width | padding+border+width |
| 讀寫屬性 | 可讀可寫 | 只讀 |
最後一點。style.width只能獲取到div的行間寬度。要想獲取到css裏面的寬度的話。就要用到getComputerStyle( element, op ).width
IE下用element.currentStyle.width。