Question

在纯JavaScript中，如何获取具有内联样式属性opacity值'1'的循环元素的长度。我只想用内联样式属性值来捕获它们，而不是分配任何classNames来捕获它们，因为出于将来的目的，我可能想用不同的属性值来捕获它们或其他样式属性值。是否有可能通过使用像这样的document.querySelectorAll("li[style*='opacity:1']")

来获取元素

<ul id="all" class="select">
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
</ul>
<script>
   var elem = document.querySelectorAll("li");

   // var elem = document.querySelectorAll("li[style*='opacity:1']");

         for (var i = 0; i < elem.length; i++) {
             if(elem[i].style.opacity == 1){
                 console.log(elem[i].length);
             }
         }
</script>

Answer 1

也许您想要这样的东西？它没有比您拥有的更好。

var elem = Array.from(document.querySelectorAll("li")).filter(el => el.style.opacity == 1);

console.log (elem.length);

<ul id="all" class="select">
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
</ul>

Answer 2

您可以尝试这样：

var elements = document.querySelectorAll('li[style="opacity: 1; display:inline-block;"]');

考虑到每个元素也有display:inline-block;。

如何在具有特定样式属性值的循环中获取元素的长度

2 个答案: