原生JavaScript获取元素的margin外边距
最近想找一个可以获取元素高度（包括外边距margin）的方法，原生JS的实现方法一直没有找到，不过有一个方法可以获取元素的边距，记录一下：
语法是（获取元素的属性值）：
getComputedStyle(element[,pseudo])该语法一般有两种用法：
document.defaultView.getComputedStyle(element[,pseudo]);或者：
window.getComputedStyle(element[,pseudo]);element 需要读取的元素的值。
pseudo 也有一种写法是 pseudo-element 意思是伪类 ::before，该参数不是必须的，空字符串或没有参数则表示元素本身。当不查询伪类元素的时候可以忽略或者传入 null 。
结果是一个包含所有样式属性的对象elem.style。可以从控制台打印查看结果：
001.png 原生JavaScript获取元素的margin外边距 经验总结
使用示例：
let my_div = document.getElementById("myDiv");
let style = window.getComputedStyle(my_div, null);获取元素的上边距 margin-top
<head>
<style>
#myDiv {
height: 300px;
width: 300px;
margin: 18px auto;
padding: 15px;
border: 5px solid #dddddd;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
var div = document.getElementById("myDiv");
var computedStyle = getComputedStyle(div, null);
alert(computedStyle.marginTop);
</script>
</body>为了实现IE和火狐、谷歌的兼容，JS可以这样写：
<script>
// 兼容IE和火狐谷歌等的写法
if (window.getComputedStyle) {
var computedStyle = getComputedStyle(div, null)
} else {
computedStyle = div.currentStyle;//兼容IE的写法
}
alert(computedStyle.marginTop);
</script>这样就能弹出 div 的上边距了。
getComputedStyle 和 style 异同
getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。
而不同点就是：
element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式
我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-10-11)，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
