Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

136
Visualizações
How to select an element with specific css value in javascript

I want to select an element if it has a css as display block then do this function. If the element has the css as display block then remove ('hide') class from the header class.. This is what I want to do.. Any help?

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Well, there are two solutions depending on what you want:

Solution 1

Looping through all elements and removing hide class from the current element if it has display block value in its style.

var elements = document.getElementsByTagName("*");

for(let i = 0; i < elements.length; i++) {
    if(elements[i].style.display == "block") {
        elements[i].classList.remove("hide");
    }
}

Solution 2

Getting the reference of the element via HTML id.

var element = document.getElementById("YourElementID");

if(element.style.display == "block") {
    element.classList.remove("hide");
}

You can define an id like this in your HTML file:

 <div id="YourElementID">Div</div>



I am assuming that you want to determine if the element has the "hide" class by checking its display style. you don't need to do that, you can easily check its class list by using the following code:

element.classList.contains("hide");
about 4 years ago · Juan Pablo Isaza Relatório

0

There are several ways of collecting all the elements with display: block and i am not sure, which one performs best - or whether it performs good at all.

If you want all the Element instances of the page, which have a computed style of display: block you can do something like:

var $els = Array.from(document.body.querySelectorAll('*')).filter(function($el) {
    return getComputedStyle($el).display === 'block';
});

Or ES6:

const $els = Array.from(document.body.querySelectorAll('*')).filter($el => getComputedStyle($el).display === 'block');

If you want the Element instances which have display: block literally set in the style-attribute, you have to do something like this:

var $els = Array.from(document.body.querySelectorAll('*')).filter(function($el) {
    return $el.style.display === 'block';
});

I think it would perform better, if the selector in querySelectorAll() would be a little more specific.

Another option would be to use the TreeWalker API, but then you have to do a mutation, because you have to iterate over all the elements and push them to an array:

var $els = [];
walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
while (walker.nextNode()) {
    if (getComputedStyle(walker.currentNode).display === 'block') {
        $els.push(walker.currentNode);
    }
}

Once you have all your elements, you can do something with them.

A little bit more information would be helpful, especially what exactly you want to achieve, once you have the elements, because then i could also provide more help. Maybe provide a code example?

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda