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

Retrieve a parameter from jQuery and pass it to a JavaScript function

Differences Between Data Captured from Form Submissions and Data Obtained Through Ajax

The error message "reload is not defined" indicates that the function reload

I am encountering an issue where body-parser is not functioning properly with typescript. Whenever I make a request, the request.body is returning as undefined

Handling Errors in Asynchronous Functions with JavaScriptLet's explore the best practices for

Avoid making GET requests when clicking on a link

Changing the size of a responsive navigation bar with React and adjusting it based on the window.scrollY position switches between collapsed and un

Once the promise program enters the if-condition, even though the condition itself is actually false

Implement a new list field to an object using javascript

Utilizing a Material UI custom theme in React with Typescript: A step-by-step guide

The Viadeo Social Toolbox seems to be encountering technical difficulties at the moment

The width of the child box does not properly receive the 100% application

Steer your keyboard attention towards the parent element that embodies a list

Tips on transferring key values when inputText changes in ReactJs using TypeScript

``Can you share your insights on transferring data from one controller to a service, and then accessing that data on another controller during the same

What about creating a PHP-MySQL voting platform?

Is there a way to determine the quantity of child objects and transmit the calculated index to each individual child object?

Steps for achieving a seamless transition in jqueryui

JQuery UI autocomplete vanishes instantly without any warning

The rendering of the Angular 2 D3 tree is not functioning properly