原生JavaScript获取元素的padding内边距(以及实际内容宽度)
原生JavaScript获取元素的padding内边距(以及实际内容宽度)最近做一个网页特效需要获取到div中实际的内容宽度(一个tab框的下滑块宽度需要对应实际内容宽度)有机会把这个案例整理下分享出来。但是HTML DOM 元素对象方法中却没有获取padding及实际内容宽度的方法。解决方案我们可以通过WIndow对象提供的getComputedStyle()获取指定元素的 CSS 样式。语法l
·
原生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 修改样式。 |
更多推荐
已为社区贡献1条内容
所有评论(0)