Question

我有以下图片标记

<img class="someclass" src="somesrc" width="220" height="165" />

浏览器显示的图片的原始宽度和高度为480x360

我想从图像标记中获取图像宽度和高度属性，该标记应返回220 and 165

我试过以下

var img = document.getElementsByClassName('someclass');
console.log(img.clientWidth);
console.log($('.someclass').attr('width'));

但它返回undefined。

以下代码返回图像的实际宽度和高度。这是480

$('.someclass').width();

有没有办法让它返回220 and 165？

Answer 1

您需要在返回时获取单个元素的width属性而不是nodeList。

试试这个......

var element = document.querySelector('.someclass');
console.log(element.getAttribute('width')); //220
console.log(element.getAttribute('height')); //165

Answer 2

感谢大家的帮助。但我找到了解决方案。以下代码适用于我。

$('img.someclass).load(function(){
  var width = $(this).attr('width');
  var height = $(this).attr('height');
  if(width != 'undefined') {
     $(this).css('width', width);
  }
  if(height != 'undefined') {
    $(this).css('height', height);
  }
});

Answer 3

var x = document.createElement("IMG");
x.setAttribute("src", "path/here");
x.setAttribute("width", "220");
x.setAttribute("height", "165");
document.getElementById("SomeID").appendChild(x);

给它一些ID，如果你想使用JS，这应该有用。

Answer 4

尝试

var img = document.getElementsByClassName('someclass')[0];
var width = img.width;
var height = img.height

如果您想设置新值，请执行以下操作：

img.width = yourvalue;
img.height = yourvalue;

它工作正常，所以PLZ不会无缘无故地投票

如何从图像标签获取宽度和高度属性？

4 个答案: