有什么办法可以select所有Javascript中一定尺寸的图片吗？

Question

我想 select 网页上的所有图像都大于特定尺寸，比如 200 x 200 像素。在 Javascript 中有什么方法可以做到这一点吗？

Answer 1

试试这个。

let img = document.querySelectorAll('img'),
  len = img.length,
  counter = 0;

[].forEach.call(img, function(img) {
  img.addEventListener('load', () => {
    counter++;
    if (counter === len) {
      console.log('all images loaded at ' + new Date().toLocaleTimeString());
      check(); // call automatically without user interaction
    }
  }, false);
});

check(); // just to show it works only after all image loads

function check(size) {
  if (counter !== len) {
    console.log('waiting for images to load at ' + new Date().toLocaleTimeString());
    return;
  }
  let result = {};
  img.forEach(e => {
    if (!result[e.naturalHeight + 'x' + e.naturalWidth]) {
      result[e.naturalHeight + 'x' + e.naturalWidth] = [];
    }
    if (size && e.naturalHeight >= size && e.naturalWidth >= size) {
      result[e.naturalHeight + 'x' + e.naturalWidth].push(e.src);
    } else if (typeof(size) == 'undefined') {
      result[e.naturalHeight + 'x' + e.naturalWidth].push(e.src);
    }
  });
  console.log(result);
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

img {
  max-width: 100%;
}

<button onclick="check()">Check Size</button>
<button onclick="check(600)">Check Size > 600</button>
<div class="container">
  <img src="https://dummyimage.com/400x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/400x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x600/000/fff" />
</div>

有什么办法可以select所有Javascript中一定尺寸的图片吗？

Is there any way to select all images of a certain size in Javascript?

javascript

dom

image

css-selectors

getelementsbytagname