html设置长宽高代码_html实现获取元素尺寸宽高的代码（纯代码）

这篇文章给大家介绍的内容是关于html实现获取元素尺寸宽高的代码(纯代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

获取元素尺寸宽高

#div{

background-color: #00ff00;

width: 60px;

height: 60px;

padding: 20px;

margin: 20px;

border: 20px solid #00ffff;

}

Prosper

/**

* 获取元素尺寸宽高(不包含margin)

*/

Element.prototype.getElementOffset = function () {

var objData = this.getBoundingClientRect();

if (objData.width) {

return {

w: objData.width,

h: objData.height

}

} else {

return {

w: objData.right - objData.left,

h: objData.top - objData.bottom

}

}

}

console.log(document.getElementById('div').getElementOffset());

相关推荐：

html给定标签选项并添加标签(附代码)

HTML实现获取浏览器可视区域宽高(纯代码)

html实现获取浏览器滚动距离(纯代码)