我有一个图像标签:
HTML代码:
<img src="image.jpg"></img>
CSS代码:
img
{
max-width: 100%;
max-height: 100%;
}
我只想知道它的实际高度和宽度(以像素为单位)(内存中的大小),如果它的宽度和高度设置为自动。如何在javascript中做到这一点?
一种方法就是这样做。通过这种方式,您可以获得DOM元素的当前高度和宽度。
<img id="someId" src="image.jpg"></img>
var imageElement = document.getElementById('someId');
var height = imageElement.clientHeight;
var width = imageElement.clientWidth;
您可以使用JavaScript来收集元素
用于高度document.querySelector('img').offsetHeight;
用于宽度document.querySelector('img').offsetWidth;
通常人们会在元素上设置一个id
或class
,以便轻松获取
像这样<img class='image' src='image.jpg'></img>
现在您可以通过其类名获取元素
document.querySelector('.image').offsetHeight;
clientWidth和clientHeight是DOM属性,用于显示DOM元素内部维度(不包括边距和边框)的当前浏览器大小。因此,在img
元素的情况下,这将获得可见图像的实际尺寸。
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;