javascript - 如何在 native JavaScript 中使用边距、填充、边框获取元素宽度/高度(无 jQuery)

标签 javascript dom

寻找可靠的方法来计算元素的 width/height + margin - padding + border 仅使用原生 JS 并且是 xbrowser (IE8+)

最佳答案

如果您只处理边距、填充和边框属性的像素值,您可以执行以下操作:

// we're assuming a reference to your element in a variable called 'element'
var style = element.currentStyle || window.getComputedStyle(element),
    width = element.offsetWidth, // or use style.width
    margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight),
    padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight),
    border = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);

alert(width + margin - padding + border);

如果您要处理其他类型的值(例如 ems、点或 auto 之类的值),我建议您引用 this answer .

关于javascript - 如何在 native JavaScript 中使用边距、填充、边框获取元素宽度/高度(无 jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23268784/

相关文章:

javascript - 优化这个脚本

javascript - 在 compose 中将 props 作为参数传递给另一个 HoC

html - 未应用 z-index 值时订单元素堆栈出现问题

javascript - 使用 javascript 事件监听器更改按钮的文本

javascript - 我的 Cordova 应用程序会被拒绝吗?从 json 响应加载外部数据

javascript - 无法从 firebase.auth().signInWithPopup(provider) 函数中更改变量

javascript - 如何使用 jQuery 获取页面向下滚动的像素数量?

javascript - 脚本未创建 <a> 元素

javascript - 判断父元素的子元素是否存在

javascript - 如何在 jQuery 选择器中执行 Javascript