I try to find out the number of <img> elements that do not have "style" attribute in a HTML file by using JavaScript.

My solution: find out numbers of <img> tags as "imgCount", then get number of <img> tags with "style" attribute as "imgStyCount". After that, use "imgCount" minus "imgStyCount" to get the final result that I wish to know.

However, something goes wrong. My browser keep told me

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

At the if statement. And the weird thing is, the alert(document.getElementsByTagName("img")[k].hasAttribute("style") show the if statement result is TRUE. How it can be like not a function and give the true value?

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/images/ngf.jpeg" style="vertical-align:middle;margin-right:20px;" />
<img src="Http://flax.nzdl/images/abc.jpg" />
<img src="Http://flax.nzdl/images/fbc.jpg" />
<img src="Http://flax.nzdl/images/agc.jpg" />
<img src="Http://flax.nzdl/images/abt.jpg" />

I try to find out the number of <img> elements that do not have "style" attribute in a HTML file by using JavaScript.

My solution: find out numbers of <img> tags as "imgCount", then get number of <img> tags with "style" attribute as "imgStyCount". After that, use "imgCount" minus "imgStyCount" to get the final result that I wish to know.

However, something goes wrong. My browser keep told me

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

At the if statement. And the weird thing is, the alert(document.getElementsByTagName("img")[k].hasAttribute("style") show the if statement result is TRUE. How it can be like not a function and give the true value?

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/images/ngf.jpeg" style="vertical-align:middle;margin-right:20px;" />
<img src="Http://flax.nzdl/images/abc.jpg" />
<img src="Http://flax.nzdl/images/fbc.jpg" />
<img src="Http://flax.nzdl/images/agc.jpg" />
<img src="Http://flax.nzdl/images/abt.jpg" />

• javascript
• html

• 1 Never use for...in loops to iterate array-like objects!!!!! – Oriol Commented Apr 1, 2016 at 5:01
• Check what value k has when you get that error. You might be surprised. – nnnnnn Commented Apr 1, 2016 at 5:03
• Thanks all of you. I finally realise what's wrong with my crap code. – H. Zhao Commented Apr 1, 2016 at 6:29
• Yet another misleading error message. It's like saying Budweiser is not a beer just because you are drinking a can of Coke. – Paul McCarthy Commented Mar 24, 2021 at 17:50

4 Answers 4

Here's a simple way without using loop.

You can use querySelectorAll with attribute selector

document.querySelectorAll('img[style]') will select all the <img> elements on the page having style attribute.

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

alert(result);

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

Use for-loop to iterate image elements than 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/images/ngf.jpeg" style="vertical-align:middle;margin-right:20px;" />
<img src="Http://flax.nzdl/images/abc.jpg" />
<img src="Http://flax.nzdl/images/fbc.jpg" />
<img src="Http://flax.nzdl/images/agc.jpg" />
<img src="Http://flax.nzdl/images/abt.jpg" />

Fiddle demo

You're wele.

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