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

原生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 修改样式。