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

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

javascript css

使用JavaScript从隐藏图像获取宽度,javascript,css,Javascript,Css,我在HTML中有一个我隐藏的图像（id=“stone”）。从这张图片中，我稍后使用cloneNode在JS中复制了几个副本（id=“stone\u xxx），将它们放在DOM中并删除隐藏的类。一切正常。我最初需要在程序开始时（在制作第一个副本之前）获得宽度，因此我从隐藏图像（id=“stone”）中获取宽度。但我总是得到自然高度（90px），而不是实际高度（45px）。我甚至在控制台中尝试排除CSS可能在JS之后执行，但这并没有改变任何东西，所以我不得不像中一样使用window.onload。

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

let stone=document.getElementById（“stone”）；
让newStone=stone.cloneNode（假）；
newStone.classList.remove（'hidden'）；
设i=1；
newStone.id=“石头”+i；
设el=document.getElementById（'position_'+i）；
el.预编（新闻石）；
console.log（stone.naturalWidth）；//=>272
console.log（石头宽度）；//=>272应该是：45
.hidden{display:none；}
.stone{宽度：45px；}
我解决了这个问题：浏览器不会计算石头的新尺寸，因为没有显示，所以不会重新计算宽度值。如果我删除隐藏的类，一切都可以。
所以我有两种可能性：

•在不隐藏类的情况下启动，然后进行设置。

•获取其中一块石头的宽度\u xxx:

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

试试这个：
<!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>


文件
常量宽度=$（“#图像”）.width（）；
console.log（宽度）；//200
这不是我想要的。我要求从隐藏的图像中获取宽度，并通过类中的css规则更改大小。您只需从一个未更改的图像中传递宽度，这是一种简单的方法。
顺便说一句，如果我将代码放入JSFIDLE，结果是200，但如果我将其放入本地HTML文件，结果是0。