使用javascript检测页面上的所有图像大小

时间:2014-04-12 16:23:02

标签: javascript

我正在尝试编写一些JavaScript,这将允许我扫描页面并搜索特定的图像大小并用红色勾勒出所述图像。示例:我想查找50x50px或65x65px的所有图像实例并勾画它们。

2 个答案:

答案 0 :(得分:2)

var images = document.getElementsByTagName('img'); 
var img;
for(var i = 0; i < images.length; i++) {
  img = images[i];
  if ((img.clientWidth == "_whatyouwant_") && (img.clientHeight == "_whatyouwant_")) {
      img.className = img.className + " hightlight";
  }
}

我们拍摄所有图像,检查尺寸,如果等于 whatyouwant ,则应用定义附加样式的类。

答案 1 :(得分:0)

你可以试试这个:

var img = document.getElementById('theidhere');
for(var a = 0; a <= image.length; a++) {
    var image = img[a];
    var width = image.clientWidth;
    var height = image.clientHeight;
}

这些附加到image属性的数据将获取元素相对于浏览器的当前属性。

然后你可以运行一个简单的if块来检查条件,例如:

if(width == 50 && height == 50) {
  /* set the outline or a class */
}

对象数据在Mozilla Developer Network上有更好的文档。

clientWidth:https://developer.mozilla.org/en/DOM/element.clientWidth

clientHeight:https://developer.mozilla.org/en/DOM/element.clientHeight