javascript - 使用hasAttribute()获取TypeError:hasAttribute不是函数

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

我的解决方案：找出<img>标签的数量为“ imgCount”，然后获取具有“ style”属性的<img>标签的数量为“ imgStyCount”。之后，使用“ imgCount”减去“ imgStyCount”获得我想知道的最终结果。

但是，出了点问题。我的浏览器不断告诉我


  TypeError：document.getElementsByTagName（...）[K] .hasAttribute不是函数


在if语句中。
奇怪的是，alert（document.getElementsByTagName（“ img”）[k] .hasAttribute（“ style”）显示if语句结果为TRUE。
怎么会像没有一个函数并给出真实的值呢？

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" />

最佳答案

使用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" />

Fiddle demo

关于javascript - 使用hasAttribute()获取TypeError:hasAttribute不是函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36348342/