Quiero seleccionar un elemento si tiene un css como bloque de visualización y luego hacer esta función. Si el elemento tiene el css como bloque de visualización, elimine ('ocultar') la clase de la clase de encabezado. Esto es lo que quiero hacer. ¿Alguna ayuda?
Bueno, hay dos soluciones dependiendo de lo que quieras:
Solución 1
Recorriendo todos los elementos y eliminando la clase oculta del elemento actual si tiene un valor de bloque de visualización en su estilo.
var elements = document.getElementsByTagName("*"); for(let i = 0; i < elements.length; i++) { if(elements[i].style.display == "block") { elements[i].classList.remove("hide"); } }Solución 2
Obtener la referencia del elemento a través de la identificación HTML.
var element = document.getElementById("YourElementID"); if(element.style.display == "block") { element.classList.remove("hide"); }Puede definir una identificación como esta en su archivo HTML:
<div id="YourElementID">Div</div>Supongo que desea determinar si el elemento tiene la clase "ocultar" al verificar su estilo de visualización. no necesita hacer eso, puede verificar fácilmente su lista de clases usando el siguiente código:
element.classList.contains("hide");Hay varias formas de recopilar todos los elementos con display: block y no estoy seguro de cuál funciona mejor, o si funciona bien.
Si desea todas las instancias de Element de la página, que tienen un estilo de display: block , puede hacer algo como:
var $els = Array.from(document.body.querySelectorAll('*')).filter(function($el) { return getComputedStyle($el).display === 'block'; });O ES6:
const $els = Array.from(document.body.querySelectorAll('*')).filter($el => getComputedStyle($el).display === 'block'); Si desea que las instancias de Element que tienen display: block se establezcan literalmente en el style -atributo, debe hacer algo como esto:
var $els = Array.from(document.body.querySelectorAll('*')).filter(function($el) { return $el.style.display === 'block'; }); Creo que funcionaría mejor si el selector en querySelectorAll() fuera un poco más específico.
Otra opción sería usar la API de TreeWalker , pero luego tienes que hacer una mutación, porque tienes que iterar sobre todos los elementos y empujarlos a una matriz:
var $els = []; walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT); while (walker.nextNode()) { if (getComputedStyle(walker.currentNode).display === 'block') { $els.push(walker.currentNode); } }Una vez que tenga todos sus elementos, puede hacer algo con ellos.
Un poco más de información sería útil, especialmente qué es exactamente lo que quiere lograr, una vez que tenga los elementos, porque entonces también podría brindarle más ayuda. ¿Tal vez proporcionar un ejemplo de código?