javascript - 使用 hasAttribute() 得到 TypeError : hasAttribute is not a function

Question

我尝试找出 <img> 的数量使用 JavaScript 在 HTML 文件中添加没有“style”属性的元素。

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

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

TypeError: document.getElementsByTagName(...)[K].hasAttribute is not a function

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

Answer 1

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

您可以使用 querySelectorAll 与 attribute selector

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

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