原生JavaScript获取元素的padding内边距(以及实际内容宽度)

最近做一个网页特效需要获取到div中实际的内容宽度（一个tab框的下滑块宽度需要对应实际内容宽度）有机会把这个案例整理下分享出来。
但是HTML DOM 元素对象方法中却没有获取padding及实际内容宽度的方法。

解决方案
我们可以通过WIndow对象提供的getComputedStyle() 获取指定元素的 CSS 样式。

语法
let style = window.getComputedStyle(element, [pseudoElt]);
//第一个参数是指定元素的dom对象
//pseudoElt伪元素拉取样式信息 比如, ::after, ::before, ::marker, ::line-marker。非必需

如何获取内边距了？继续看下面

let elem1 = document.getElementById("elemId");
let style = window.getComputedStyle(elem1, null);
let paddingL = parseFloat(style.getPropertyValue('padding-left')); //获取左侧内边距
let paddingR = parseFloat(style.getPropertyValue('padding-right')); //获取右侧内边距
let w = parseFloat(style.getPropertyValue('width')); // 获取实际宽度
let concentW = Number(w = paddingL - paddingR ); //实际内容宽度

**注意这时候返回的内边距是带单位 ‘px ’的
我们可以用 parseFloat() 强转一下

兼容
为了实现IE和火狐、谷歌的兼容，JS可以这样写：

<script>
// 兼容IE和火狐谷歌等的写法
if (window.getComputedStyle) {
var computedStyle = getComputedStyle(div, null)
} else {
computedStyle = div.currentStyle;//兼容IE的写法
}
alert(computedStyle.marginTop);
</script>

结尾
getComputedStyle 和 style 异同
相同： getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。
不同： element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。 element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式 我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式。

 

————————————————
版权声明：本文为CSDN博主「晨宇烁」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40482342/article/details/124138235