javaScript/js 獲取屏幕寬高，元素寬高/margin/padding

1.獲取屏幕寬高

實現兼容

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

// 獲取屏幕寬度
let windowWidth = document.documentElement.clientWidth || document.body.clientWidth;

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.currentStyle) {
          return obj.currentStyle[attr];
        } else {
          return document.defaultView.getComputedStyle(obj, null)[attr];
        }
      }
    }
  }
};
</script>

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

如果本篇文章對你有幫助的話，很高興能夠幫助上你。

當然，如果你覺得文章有什麼讓你覺得不合理、或者有更簡單的實現方法又或者有理解不來的地方，希望你在看到之後能夠在評論裏指出來，我會在看到之後儘快的回覆你。