Estoy desarrollando un script bloqueador de anuncios y he colocado un div con clases como esta =
<div id="detect" class="ad ads adsbox ad-placement doubleclick ad-placeholder ad-badge"></div>Si el bloqueador de anuncios está presente en el navegador, hará que los atributos css no muestren ninguno en el navegador.
Entonces, aquí quiero verificar si esta clase se muestra o no en el navegador. Si se muestra la clase, quiero mostrar el texto que dice que el bloqueador de anuncios no está disponible y si el elemento div está oculto sin ninguna propiedad con la extensión del bloqueador de anuncios, mostraremos el texto del bloqueador de anuncios.
¿Cómo puedo detectar la propiedad de display: none !important; este atributo con javascript?
Parece que estás buscando el método Window.getComputedStyle() que:
[...] devuelve un objeto que contiene los valores de todas las propiedades CSS de un elemento, después de aplicar hojas de estilo activas y resolver cualquier cálculo básico que esos valores puedan contener.
En este caso, está buscando el valor de la propiedad de display . Es posible que deba esperar el evento de load del documento según cómo funcione su bloqueador de anuncios.
Si necesita comprobar que se utiliza el indicador !important , también puede llamar al método CSSStyleDeclaration.getPropertyPriority() . El siguiente ejemplo muestra ambos:
const canary = document.querySelector('div#detect'); const style = getComputedStyle(canary); if (style.display === 'none') { console.log('Adblocker active.'); const isImportant = style.getPropertyPriority('display') === 'important'; console.log(`Important: ${isImportant}`); } <div id="detect" class="ad ads adsbox ad-placement doubleclick ad-placeholder ad-badge"></div>Puedes intentar algo como esto:
window.addEventListener('DOMContentLoaded', (event) => { let ads = document.querySelectorAll('.ad, .ads, .adsbox, .ad-placement, .doubleclick, .ad-placeholder, .ad-badge'); for(let i in ads){ if(ads[i].style.display === 'none') document.getElementById('presence').innerHTML = 'Adblock Present' } }); <div id="detect" class="ad ads adsbox ad-placement doubleclick ad-placeholder ad-badge">Hello</div> <div id="detect" style="display: none !important;" class="ad ads adsbox ad-placement doubleclick ad-placeholder ad-badge">This is a hidden ad</div> <b id='presence'></b> Sin embargo, le recomiendo que también verifique esta respuesta para que pueda refinar el método para obtener estilos de elementos. es decir getComputedStyle