使用hasAttribute(）获取类型错误:hasAttribute不是函数

Use hasAttribute() get TypeError: hasAttribute is not a function

本文关键字：hasAttribute 函数 错误 取类型 获取 使用      更新时间：2023-10-16

我试图通过使用JavaScript来找出HTML文件中不具有"style"属性的<img>元素的数量。

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

然而，出现了问题。我的浏览器一直告诉我

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

在if语句中。奇怪的是，警报（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" />

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

您可以将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" />

使用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演示

不客气。

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

<span medium-img>Whatever</span>
alert($('span').is('[medium-img]')); // Returns true
相关文章：