JS-获取元素宽高的方式

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100px;
        height: 100px;
        padding: 50px;
        border: 50px solid #000;
        background: red;
        background-clip: content-box;
    }
</style>

<div id="box"></div>

style

• 获取的宽高不包括边框和内边距
• 只能获取行内设置的宽高, 不能获取CSS设置的宽高
• 可以获取也可以设置
• 高级低级浏览器都支持

var oDiv = document.getElementById("box");
console.log(oDiv.style.width);		// 不能获取CSS设置的宽高
console.log(oDiv.style.height);		// 不能获取CSS设置的宽高

oDiv.style.width = "166px";
oDiv.style.height = "166px";
console.log(oDiv.style.width);		// 166px
console.log(oDiv.style.height);		// 166px

---

getComputedStyle

• 获取的宽高不包括边框和内边距
• 即可以获取行内设置的宽高也可以获取CSS设置的宽高
• 只支持获取, 不支持设置
• 只支持IE9及以上浏览器

var oDiv = document.getElementById("box");
var style = getComputedStyle(oDiv);
console.log(style.width);		// 100px
console.log(style.height);		// 100px

style.width = "166px";		// 不可设置  报错
style.height = "166px";		// 不可设置  报错

---

currentStyle

• 获取的宽高不包括 边框和内边距
• 即可以获取行内设置的宽高也可以获取CSS设置的宽高
• 只支持获取, 不支持设置
• 只支持IE9以下浏览器

var oDiv = document.getElementById("box");
var style = oDiv.currentStyle;
console.log(style.width);		// 100px
console.log(style.height);		// 100px

---

offsetWidth和offsetHeight

• 获取的宽高包含 边框 + 内边距 + 元素宽高
• 即可以获取行内设置的宽高也可以获取CSS设置的宽高
• 只支持获取, 不支持设置
• 高级低级浏览器都支持

var oDiv = document.getElementById("box");
oDiv.style.width = "166px";
oDiv.style.height = "166px";
console.log(oDiv.offsetWidth);		// 366px
console.log(oDiv.offsetHeight);		// 366px

var oDiv = document.getElementById("box");
oDiv.offsetWidth = "166px";
oDiv.offsetHeight = "166px";
console.log(oDiv.offsetWidth);		// 300px
console.log(oDiv.offsetHeight);		// 300px

---

区别

方式	设置属性	获取属性	包括边框和内边距	获取行内	获取外链和内联样式
style	Yes	Yes	No	Yes	No
getComputedStyle	No	Yes	No	Yes	Yes
currentStyle	No	Yes	No	Yes	Yes
offsetWidth/offsetHeight	No	Yes	Yes	Yes	Yes