javaScript/js 获取屏幕宽高，元素宽高/margin/padding

1.获取屏幕宽高

实现兼容

// 获取屏幕宽度
let windowWidth = document.documentElement.clientWidth || document.body.clientWidth;

// 获取屏幕高度
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

2.获取元素宽高

兼容IE

<template>
<div>
<div class="container"></div>
<button @click="getStyles">点击获取元素宽/高度/margin</button>
</div>
</template>

<script>
export default {
methods: {
getStyles() {
// 获取元素
let oDiv = document.querySelector('.container');

// 使用，第一个参数元素，第二参数，元素的属性，如：width/height/margin/border都可以
let oDivWidth = getStyle(oDiv, 'width');
let oDivHeight = getStyle(oDiv, 'height');
let oDivMargin = getStyle(oDiv, 'margin');

console.log(oDivWidth);
console.log(oDivHeight);
console.log(oDivMargin);

// 兼容IE浏览器
function getStyle(obj, attr) {
if (obj.Style) {
return obj.Style[attr];
} else {
return document.defaultView.getComputedStyle(obj, null)[attr];
}
}
}
}
};
</script>

<style scoped>
.container {
width: 100px;
height: 100px;
padding-left: 10px;
margin: 20px auto;
background-color: greenyellow;
}
</style>


————————————————
转载：https://blog.csdn.net/weixin_43233914/article/details/84840715