JavaScript：使用 getComputedStyle() 获取图像的大小答案

【问题标题】：JavaScript: getting the size of an image using getComputedStyle()JavaScript：使用 getComputedStyle() 获取图像的大小
【发布时间】：2015-03-25 21:13:35
【问题描述】：

我目前遇到一个“奇怪的问题”...我是 JavaScript 的初学者，我想获取图像的高度以设置图像的大小。

我得到了屏幕的宽度
我设置了取决于屏幕尺寸的图像宽度 => 我猜电脑也设置了图像的高度。
我问图片的高度
我打印它

这是代码：

var screenWidth = (window.innerWidth);  
myImg.width = Math.floor(screenWidth/3); // That works, my image is sized well.  
var imgLarg = getComputedStyle(myImg,null).height.toLowerCase()  
console.log(imgLarg);

问题如下：当我通过网址重新加载页面来刷新页面时，它可以工作。但是，当我按下刷新按钮时，代码返回“0px”。

【问题讨论】：

请提供更多上下文，这无法通过帖子中的信息解决。这里的一个重要部分是执行此代码的时间和地点。
到这一步，代码很简单，为了更好的理解，我做了简化，问题依旧。带有<img src="waves.jpg" alt="photo" id="imag" /> 的简单html 代码。就在</html>之前，和之前一样有js脚本，以var myImg = document.querySelector('#imag')这一行开头。在实际情况下，我希望获取图像的高度来设置
的大小。我试过myImg.onload = function(){}，但我遇到了困难......

标签： javascript html css image

【解决方案1】：

将您的代码包装在document.ready（如果您使用jquery）或收听DOMContentLoaded。等待图像完全加载，然后再获取其尺寸。如果您使用 jquery 或 Image.onload()，请使用 .load。

http://api.jquery.com/ready/
http://api.jquery.com/load/
http://developer.mozilla.org/En/XUL/Attribute/Onload

【讨论】：

这里的时间确实是个问题，但你不能在不干扰 jQuery 的情况下给出答案，而 jQuery 甚至没有在帖子中标记。
@Teemu 我刚刚更新了我的答案以包含香草 javascript 的信息。我已尽力在正确的方向上阐明一些光。
不幸的是 DOMContentLoaded 或 jQuery 的 $(document).ready() 不要等待图像加载...
@Teemu 这就是为什么我提到了Image.onload() 或.load() :)
FWIW 给未来的读者，我正在使用 jQuery .load() 方法，但通常仍然可以找到尚未计算的大小 (0px)。我仍在寻找“样式计算”事件。