JavaScript其他获取元素宽高方式

Posted 好_快

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript其他获取元素宽高方式相关的知识，希望对你有一定的参考价值。

一、Window.getComputedStyle

  • 获取的宽高不包括 border 和 padding
  • 既可以获取行内样式设置的宽高
  • 又可以获取CSS文件设置的宽高
  • 只读
  • 不支持 IE8 及更早版本

1.1 示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>getComputedStyle</title>
    <style>
      #css 
        width: 100px;
        height: 100px;
        border: 50px solid black;
        padding: 50px;
        margin: 50px;
        background: blue;
      
    </style>
  </head>
  <body>
    <div
      id="inline"
      style="
        width: 100px;
        height: 100px;
        background: green;
        border: 50px solid black;
        padding: 50px;
        margin: 50px;
      "
    ></div>
    <div id="css"></div>
    <script>
      const inline = document.getElementById("inline");
      const css = document.getElementById("css");
      const inlineStyle = getComputedStyle(inline);
      const cssStyle = getComputedStyle(css);
      console.log("inlineStyle.width:", inlineStyle.width);
      console.log("inlineStyle.height:", inlineStyle.height);
      console.log("cssStyle.width:", cssStyle.width);
      console.log("cssStyle.height:", cssStyle.height);
      inlineStyle.height = "300px";
    </script>
  </body>
</html>


<!--输出结果-->
inlineStyle.width: 100px 
inlineStyle.height: 100px 
cssStyle.width: 100px 
cssStyle.height: 100px 
Uncaught DOMException: CSS2Properties.height setter: Can't set value for property 'height' in computed style

二、Element.currentStyle

  • 获取的宽高不包括 border 和 padding
  • 既可以获取行内样式设置的宽高
  • 又可以获取CSS文件设置的宽高
  • 只读
  • 只支持 IE8 及更早版本

2.1 示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>currentStyle</title>
    <style>
      #css 
        width: 100px;
        height: 100px;
        border: 50px solid black;
        padding: 50px;
        margin: 50px;
        background: blue;
      
    </style>
  </head>
  <body>
    <div
      id="inline"
      style="width: 100px; height: 100px; border: 50px solid black;padding: 50px; margin: 50px; background: green;"
    ></div>
    <div id="css"></div>
    <script>
      var inline = document.getElementById("inline");
      var css = document.getElementById("css");
      var inlineStyle = inline.currentStyle;
      var cssStyle = css.currentStyle;
      console.log("inlineStyle.width:", inlineStyle.width);
      console.log("inlineStyle.height:", inlineStyle.height);
      console.log("cssStyle.width:", cssStyle.width);
      console.log("cssStyle.height:", cssStyle.height);
      inlineStyle.height = "300px";
    </script>
  </body>
</html>

<!---->
SCRIPT438: 对象不支持此属性或方法 currentStyle.html (32,7)
inlineStyle.width: 100px
inlineStyle.height: 100px
cssStyle.width: 100px
cssStyle.height: 100px

三、Element.style

  • 元素内联样式属性
  • 无法其他地方声明的样式，如 部分的内嵌样式表，或外部样式表
  • 要获取一个元素的所有 CSS 属性，你应该使用 window.getComputedStyle()

3.1 示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Style</title>
    <style>
      #css 
        width: 100px;
        height: 100px;
        border: 50px solid black;
        padding: 50px;
        margin: 50px;
        background: blue;
      
    </style>
  </head>
  <body>
    <div
      id="inline"
      style="
        width: 100px;
        height: 100px;
        background: green;
        border: 50px solid black;
        padding: 50px;
        margin: 50px;
      "
    ></div>
    <div id="css"></div>
    <script>
      const inline = document.getElementById("inline");
      const css = document.getElementById("css");
      const inlineStyle = inline.style;
      const cssStyle = css.style;
      console.log("inlineStyle.width:", inlineStyle.width);
      console.log("inlineStyle.height:", inlineStyle.height);
      console.log("cssStyle.width:", cssStyle.width);
      console.log("cssStyle.height:", cssStyle.height);
      inlineStyle.height = "300px";
      inlineStyle.width = "300px";
      console.log("inlineStyle.width:", inlineStyle.width);
      console.log("inlineStyle.height:", inlineStyle.height);
    </script>
  </body>
</html>

<!---->
inlineStyle.width: 100px
inlineStyle.height: 100px
cssStyle.width: 
cssStyle.height: 
inlineStyle.width: 300px
inlineStyle.height: 300px

四、Element.getBoundingClientRect

  • 返回元素的大小及其相对于视口的位置
  • content-box，元素的尺寸等于width/height + padding + border-width
  • border-box，元素的尺寸等于 width/height
  • 不兼容 IE8 及其更早版本
  • 只读

4.1 示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>getBoundingClientRect</title>
    <style>
      #content-box 
        width: 100px;
        height: 100px;
        border: 50px solid black;
        padding: 50px;
        margin: 50px;
        background: blue;
        box-sizing: content-box;
      
      #border-box 
        width: 100px;
        height: 100px;
        border: 50px solid black;
        padding: 50px;
        margin: 50px;
        background: green;
        box-sizing: border-box;
      
    </style>
  </head>
  <body>
    <div id="content-box"></div>
    <div id="border-box"></div>
    <script>
      const content = document.getElementById("content-box");
      const border = document.getElementById("border-box");
      const contentRect = content.getBoundingClientRect();
      const borderRect = border.getBoundingClientRect();
      console.log("content-box-width:", contentRect.width);
      console.log("content-box-height:", contentRect.height);
      console.log("border-box-width:", borderRect.width);
      console.log("border-box-height:", borderRect.height);
    </script>
  </body>
</html>

<!---->
content-box-width: 300
content-box-height: 300
border-box-width: 200
border-box-height: 200

参考链接

以上是关于JavaScript其他获取元素宽高方式的主要内容，如果未能解决你的问题，请参考以下文章

获取元素尺寸宽高

JavaScript其他获取元素的方式

jquery获取元素各种宽高及页面宽高

【零碎】js获取宽高和font-size大小以及样式表的其他值

如何获取 AlertDialog 的宽高 - Flutter Web

JavaScript或者jQuery怎样获取一个隐藏元素的宽高