querySelector (), где display не является none

у меня длинный список <li> элементы, которые мне нужно отфильтровать. Мне нужны видимые. Вот пример скрытого:

<li style="display:none;" 
<a href="https://www.example.com/dogs/cats/">
<img class="is-loading" width="184" height="245" 
</a><span>dogscats</span>
</li>

те, которые не скрыты, не имеют атрибута отображения видимого, у них просто нет атрибута стиля вообще.

Это дает мне противоположность тому, что я хочу:

document.querySelectorAll('.newSearchResultsList li[style="display:none;"]')

как я могу выбрать на основе атрибута стиля не равно или содержит " display:none;"?

7
css-selectors javascript

3 ответов

все это своего рода хаки, но вы могли бы использовать :not() селектор для инвертирования выбора. Будьте осторожны, некоторые браузеры нормализуют атрибут style, поэтому вы захотите включить селектор для пространства, которое может быть нормализовано.

var elements = document.querySelectorAll(
    '.newSearchResultsList li:not([style*="display:none"]):not([style*="display: none"])'
);

console.log(elements);
<ul class="newSearchResultsList">
    <li style="display:none;">hidden 1</li>
    <li style="display:block;">visisble 1</li>
    <li style="display:none;">hidden 2</li>
    <li style="display:block;">visisble 2</li>
</ul>
14

попробуйте это:

document.querySelectorAll('.newSearchResultsList li:hidden')

или (EDIT: на основе атрибута style.)

document.querySelectorAll('.newSearchResultsList li[style*="display:none"]');

или opossite

document.querySelectorAll('.newSearchResultsList li:not([style*="display:none"])');
1
  • использовать '.newSearchResultsList li' селектор для выбора всех li элементов
  • использовать Array#filter коллекции
  • использовать getComputedStyle чтобы получить все стили, связанные с элементом
  • возвращает только те элементы, имеющие style != = none 

var liElems = document.querySelectorAll('.newSearchResultsList li');
var filtered = [].filter.call(liElems, function(el) {
  var style = window.getComputedStyle(el);
  return (style.display !== 'none')
});
console.log(filtered);
<ul class="newSearchResultsList">
  <li style="display:none;">
    <a href="https://www.example.com/dogs/cats/">
      <img class="is-loading" width="184" height="245">
    </a><span>dogscats</span>
  </li>
  <li>
    <a href="https://www.example.com/dogs/cats/">
      <img class="is-loading" width="184" height="245">
    </a><span>Visible</span>
  </li>
</ul>
0