使用hasAttribute() get TypeError: hasAttribute不是一个函数

Question

我试图通过使用<img> JavaScript来找出在HTML文件中没有“样式”属性的元素的数量。

我的解决方案:找出<img>标记的编号为"imgCount"，然后以“imgCount”属性获取<img>标记的数量。在此之后，使用"imgCount“减imgCount来获得我想知道的最终结果。

但是，有些地方出了问题。我的浏览器一直告诉我

document.getElementsByTagName(...)K.hasAttribute不是一个函数

在if声明中。奇怪的是，alert(document.getElementsByTagName("img")k.hasAttribute("style")显示if语句的结果是真的。它怎么可能不像一个函数而给出真正的价值呢？

​

var imgCount = 0;

var imgStyCount = 0;

var result;

for (k in document.getElementsByTagName("img")) {

  if (document.getElementsByTagName("img")[k].hasAttribute("style") == true) {

    alert(document.getElementsByTagName("img")[k].hasAttribute("style"));

    console.log("    <img> =: ", document.getElementsByTagName("img")[k].style);

    imgStyCount++;

  }

  imgCount++;

}
result = imgCount - imgStyCount;

<img height="150px" src="Http://flax.nzdl.org/images/ngf.jpeg" style="vertical-align:middle;margin-right:20px;" />
<img src="Http://flax.nzdl.org/images/abc.jpg" />
<img src="Http://flax.nzdl.org/images/fbc.jpg" />
<img src="Http://flax.nzdl.org/images/agc.jpg" />
<img src="Http://flax.nzdl.org/images/abt.jpg" />

​

Answer 1

使用for-loop来迭代image元素而不是for-in

​

var imgStyCount = 0;
var elems = document.getElementsByTagName("img");
for (var k = 0; k < elems.length; k++) {
  if (elems[k].hasAttribute("style")) {
    imgStyCount++;
  }
}
var result = elems.length - imgStyCount;
alert(result);

<img height="150px" src="Http://flax.nzdl.org/images/ngf.jpeg" style="vertical-align:middle;margin-right:20px;" />
<img src="Http://flax.nzdl.org/images/abc.jpg" />
<img src="Http://flax.nzdl.org/images/fbc.jpg" />
<img src="Http://flax.nzdl.org/images/agc.jpg" />
<img src="Http://flax.nzdl.org/images/abt.jpg" />

​

小提琴演示

Answer 2

这里有一种不使用循环的简单方法。

您可以将querySelectorAll与属性选择器结合使用

document.querySelectorAll('img[style]')将选择页面上具有style属性的所有<img>元素。

​

var result = document.querySelectorAll('img').length - document.querySelectorAll('img[style]').length;

alert(result);

<img height="150px" src="Http://flax.nzdl.org/images/ngf.jpeg" style="vertical-align:middle;margin-right:20px;" />
<img src="Http://flax.nzdl.org/images/abc.jpg" />
<img src="Http://flax.nzdl.org/images/fbc.jpg" />
<img src="Http://flax.nzdl.org/images/agc.jpg" />
<img src="Http://flax.nzdl.org/images/abt.jpg" />

​

Answer 3

不用谢。

function hasAttr(el, attr) {
      if(typeof el === 'object' && el !== null && 'getAttribute' in el  && el.hasAttribute(attr)) return true
      else return false
    }