JavaScript其他获取元素宽高方式

最新推荐文章于 2024-07-31 16:33:32 发布

好_快

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量264

点赞数

分类专栏： JavaScript学习笔记文章标签： currentStyle style javascript ComputedStyle ClientRect

本文链接：https://blog.csdn.net/ZWQ0325/article/details/111560526

版权

一、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>


<!--输出结果--&g

最低0.47元/天解锁文章

好_快

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript其他获取元素宽高方式

一、Window.getComputedStyle获取的宽高不包括 border 和 padding既可以获取行内样式设置的宽高又可以获取CSS文件设置的宽高只读不支持 IE8 及更早版本1.1 示例代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>getComputedStyle</title>
复制链接

扫一扫

专栏目录