[英]How can I get the size of images by javascript?
我試圖通過javascript獲取圖像大小，因為我使用了offsetHeight，scrollHeight，clientHeight，但這些都不起作用。 naturalHeight屬性可以工作，但是即使使用css調整了圖像的大小，它也會返回圖像的實際大小。 奇怪的是，如果我單擊“嘗試”按鈕，則相同的代碼將運行良好。 我在哪里錯了？
請解釋：
var imageHeightMethodOne = document.querySelector('.one').offsetHeight; console.log('MT1-The height of img is ' + imageHeightMethodOne); var imageHeightMethodTwo = document.querySelector('.one').scrollHeight; console.log('MT2-The height of img is ' + imageHeightMethodTwo); var imageHeightMethodThree = document.querySelector('.one').clientHeight; console.log('MT3-The height of img is ' + imageHeightMethodThree); var imageHeightMethodFour = document.querySelector('.one').naturalHeight; console.log('MT4-The height of img is ' + imageHeightMethodFour); function test() { var imageHeightMethodOne = document.querySelector('.one').offsetHeight; console.log('MT1-The height of img is ' + imageHeightMethodOne); var imageHeightMethodTwo = document.querySelector('.one').scrollHeight; console.log('MT2-The height of img is ' + imageHeightMethodTwo); var imageHeightMethodThree = document.querySelector('.one').clientHeight; console.log('MT3-The height of img is ' + imageHeightMethodThree); var imageHeightMethodFour = document.querySelector('.one').naturalHeight; console.log('MT4-The height of img is ' + imageHeightMethodFour); }
<div class='container' style='width:40%;'> <img class='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6K8uN-QjZpaY10m_SQvqnwXDr8vqQijLi_XhZrJqSLDkMz5vvag' style='width:100%;height:auto;' /> </div> <button onclick='test()'>try</button>
function test() { var imageHeightMethodOne = document.querySelector('.one').offsetHeight; console.log('MT1-The height of img is ' + imageHeightMethodOne); var imageHeightMethodTwo = document.querySelector('.one').scrollHeight; console.log('MT2-The height of img is ' + imageHeightMethodTwo); var imageHeightMethodThree = document.querySelector('.one').clientHeight; console.log('MT3-The height of img is ' + imageHeightMethodThree); var imageHeightMethodFour = document.querySelector('.one').naturalHeight; console.log('MT4-The height of img is ' + imageHeightMethodFour); }
<body onload="test();"> <div class='container' style='width:40%;'> <img class='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6K8uN-QjZpaY10m_SQvqnwXDr8vqQijLi_XhZrJqSLDkMz5vvag' style='width:100%;height:auto;' /> </div> <button onclick='test()'>try</button> </body>
在onLoad事件中調用該函數。 這將確保頁面的資產已加載，包括圖像，css。
如何使用JavaScript在樣式表中獲取有關圖像的信息
[英]How can I get information about images in a stylesheet using JavaScript
如何獲取 JavaScript 中創建的音頻元素的文件大小？
[英]How can I get the file size of a created audio element in JavaScript?
如何獲得網站圖像相對於頁面瀏覽量或點擊數的大小？
[英]How can I get a website's images to increase in size, relative to their page views or hits?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.