How to choose elements using jQuery according to their CSS properties?

Question

How to choose elements using jQuery according to their CSS properties?

Seeking a solution to a unique challenge I've encountered. The website I frequent has found a way to bypass my uBlock extension by using a script that generates random element classes, such as:

<div class="lcelqilne1471483619510ttupv"></div>
<div class="xgdxts1471483770461tkbfjhcr"></div>

Because the string changes each time, consistently selecting it proves to be difficult. This class overlays the site and prompts users to click on it, leading to pop-up ads utilizing some sort of Base64 exploit to display new tabs or pop-ups. While the element is invisible, it does have certain CSS variables that could potentially allow for selection by class/ID. However, my knowledge of how to achieve this through javascript/jQuery (with greasemonkey) is limited. Additionally, I am seeking help in hiding or blocking this popup.

display: block !important;
visibility: visible !important;
top: 0px !important;
left: 0px !important;
position: absolute !important;
z-index: 999999 !important;

In essence, I am looking for a way to target and hide/block this element based on its CSS attributes rather than the element name. http://prntscr.com/c7474u

javascript jquery css

Answer 1

Answer №1

Utilize the .filter() method to verify the computed style for specific settings you are seeking.

$("div[class]").filter(function() {
    if (this.className.length != 27) { // Avoid costly style check if we do not have a random-looking class
        return false;
    }
    var style = getComputedStyle(this);
    return (style.visibility == 'visible' && style.top == '0px' && style.left == '0px' && style.position == 'absolute' && style.zIndex == 999999);
}).hide();

This operation may be resource-intensive. Improving the selector could enhance performance.

Answer 2

Utilize the .filter() method to verify the computed style for specific settings you are seeking.

$("div[class]").filter(function() {
    if (this.className.length != 27) { // Avoid costly style check if we do not have a random-looking class
        return false;
    }
    var style = getComputedStyle(this);
    return (style.visibility == 'visible' && style.top == '0px' && style.left == '0px' && style.position == 'absolute' && style.zIndex == 999999);
}).hide();

This operation may be resource-intensive. Improving the selector could enhance performance.

Answer 3

Answer №2

To identify elements with a className of exactly 27 characters, consisting of lowercase letters followed by digits and then more lowercase letters, you can utilize

document.querySelectorAll("[class]")

, Array.prototype.filter(), and RegExp.prototype.test().

var filter = [].filter.call(document.querySelectorAll("[class]"), function(el) {
    return el.className.length === 27 && /[a-z]+[0-9]+[a-z]+/.test(el.className);
});    
console.log(filter);
// perform actions
filter[0].style.color = "blue";

<div class="xgdxts1471483770461tkbfjhcr">xgdxts1471483770461tkbfjhcr</div>
<div class="abc456wyx">abc</div>
<div class="123def789">123</div>

Answer 4

To identify elements with a className of exactly 27 characters, consisting of lowercase letters followed by digits and then more lowercase letters, you can utilize

document.querySelectorAll("[class]")

, Array.prototype.filter(), and RegExp.prototype.test().

var filter = [].filter.call(document.querySelectorAll("[class]"), function(el) {
    return el.className.length === 27 && /[a-z]+[0-9]+[a-z]+/.test(el.className);
});    
console.log(filter);
// perform actions
filter[0].style.color = "blue";

<div class="xgdxts1471483770461tkbfjhcr">xgdxts1471483770461tkbfjhcr</div>
<div class="abc456wyx">abc</div>
<div class="123def789">123</div>

Answer 5

Answer №3

If you're looking for a CSS solution based on the provided markup in the screenshot, one option to consider is:

body > div:last-child {
    display: none !important;
}

This approach is effective because body > div:last-child has higher specificity compared to .xgdxts1471483770461tkbfjhcr (assuming how the selector is applied, as details weren't included in your initial post)

For example:

.xgdxts1471483770461tkbfjhcr {
display: block !important;
visibility: visible !important;
top: 0px !important;
left: 0px !important;
position: absolute !important;
z-index: 999999 !important;
}
body > div:last-child {
display: none !important;
}

<body>
    <div id="fb-root"></div>
    <div style="display:none"></div>
    <div class="xgdxts1471483770461tkbfjhcr">Hello</div>
</body>

Answer 6

If you're looking for a CSS solution based on the provided markup in the screenshot, one option to consider is:

body > div:last-child {
    display: none !important;
}

This approach is effective because body > div:last-child has higher specificity compared to .xgdxts1471483770461tkbfjhcr (assuming how the selector is applied, as details weren't included in your initial post)

For example:

.xgdxts1471483770461tkbfjhcr {
display: block !important;
visibility: visible !important;
top: 0px !important;
left: 0px !important;
position: absolute !important;
z-index: 999999 !important;
}
body > div:last-child {
display: none !important;
}

<body>
    <div id="fb-root"></div>
    <div style="display:none"></div>
    <div class="xgdxts1471483770461tkbfjhcr">Hello</div>
</body>

How to choose elements using jQuery according to their CSS properties?

Answer №1

Answer №2

Answer №3

Similar questions

What is the recommended life cycle method to use with Redux?

"Upon the second click, the Ajax success function will display the returned view

What is the appropriate utilization of the await keyword within concise if-else statements in JavaScript?

Encountering deployment problems with React and TypeScript involving router on Github Pages

Tips for confirming schedule accuracy

I am looking to implement a permanent change using PHP Ajax

how to execute a javascript function in an ionic controller from the template

Establish communication between two Sails applications

Can one button be clicked to trigger the activation of another button through a click?

Customized Quick Access MUI

Border becomes dashed when dragging and dropping

The functionality for validating and submitting forms using Ajax is not functioning as expected

Encountering difficulties setting cookies within the app router in Next.js

Listening for select elements that have remained unchanged

Is it possible to redefine a function that is attached to $ctrl outside of the AngularJS framework?

Implementing class styles using jQuery; however, certain styles fail to be effectively applied

Calculations for jQuery UI sliders

POST request in Ajax with NodeJs/MongoDB/Mongoose causing an Uncaught TypeError: Illegal invocation

Interactive element for initiating a HTTP request to NodeJS/Express server to trigger a specific function

Is there a new update to Google Maps API?