使用 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