使用 JavaScript 从隐藏图像中获取宽度

Question

我的 HTML 中有一个我隐藏的图像（id=“stone”）。 从这张图片中，我稍后在 JS 中使用 cloneNode 制作了几个副本（id=”stone_xxx），将它们放入 DOM 并删除隐藏类。 一切正常。 我最初在程序启动时需要宽度（在我制作第一个副本之前），所以我从隐藏图像（id =“stone”）中获取它。 但我总是得到 naturalHeight (90px) 而不是实际高度 (45px)。
我什至在控制台中尝试排除可能在 JS 之后执行 CSS 但这并没有改变任何东西，所以我不得不使用 window.onload 就像在获取图像宽度高度 ZDE9B9ED78D7E2E1DCEEFFEE780E2F919中一样

 let stone = document.getElementById( "stone" ); let newStone = stone.cloneNode( false ); newStone.classList.remove( 'hidden' ); let i = 1; newStone.id = "stone_" + i; let el = document.getElementById( 'position_' + i); el.prepend(newStone); console.log(stone.naturalWidth); // => 272 console.log(stone.width); // => 272 Should be: 45

 .hidden { display: none;}.stone { width: 45px;}

 <img id="stone" class="stone hidden" src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png /> <div id="position_1"></div>

Answer 1

我解决了它：浏览器不计算石头的新尺寸，因为没有显示，所以宽度的值不会重新计算。 如果我删除隐藏的 class 一切正常。 所以我有两种可能性：
• 开始时不隐藏 class 并在之后设置它。
• 获取其中一个克隆stones_xxx 的宽度：

let newStone = document.getElementById( "stone_xxx" );
let width = newStone.width;
console.log(width);   // => 45

Answer 2

尝试这个：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img id="image" src="http://www.fillmurray.com/200/200" alt="image" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      const width = $('#image').width();

      console.log(width); // 200
    </script>
  </body>
</html>

使用 JavaScript 从隐藏图像中获取宽度

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-05-26 21:42:41

解决方案2
0 2020-05-26 22:15:31

使用 JavaScript 从隐藏图像中获取宽度

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-05-26 21:42:41

解决方案2 0 2020-05-26 22:15:31

解决方案1
1 已采纳 2020-05-26 21:42:41

解决方案2
0 2020-05-26 22:15:31