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

180it 2019-09-24 AM 544℃ 0条

1.获取屏幕宽高

实现兼容

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

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

2.获取元素宽高

兼容IE

<template>
<div>

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

</div>
</template>
<script>
export default {

methods: {
  btn () {
    //获取元素
    var oDiv = document.querySelector('.div');

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

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

}
</script>
<style>
.div {

width: 100px;
height: 100px;
margin-left: 10px;
background: greenyellow;

}
</style>
————————————————

原文链接:https://blog.csdn.net/weixin_43233914/article/details/84840715

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章或资源对您有帮助,欢迎打赏作者。一路走来,感谢有您!

标签: none

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