Retrieve and modify the various elements belonging to a specific category

Question

Retrieve and modify the various elements belonging to a specific category

I'm currently developing a chrome extension and I need to access all elements of this specific type: https://i.stack.imgur.com/sDZSI.png

I attempted the following but was unable to modify the CSS properties of these elements:

const nodeList = document.querySelectorAll(".titleCard-progress"); 
for (let i = 0; i < nodeList.length; i++) {   
    nodeList[i].style.visibility = "hidden"; 
}

Is there a way to retrieve all elements that are both of type "progress" and have the class "titleCard-progress"?

javascript css google-chrome google-chrome-extension

Answer 1

Answer №1

It could be possible that your script is running before the elements are generated. Consider the timing of when your code runs in relation to when the elements appear on the page. Even if you run your code after the elements are generated, new elements may continue to be created and your code won't affect them.

To ensure your actions apply to all current and future elements, it might be helpful to add CSS styles that target both existing and upcoming elements.

It's hard to say for certain if this is the root cause of the issue.

Best of luck with resolving it.

Answer 2

It could be possible that your script is running before the elements are generated. Consider the timing of when your code runs in relation to when the elements appear on the page. Even if you run your code after the elements are generated, new elements may continue to be created and your code won't affect them.

To ensure your actions apply to all current and future elements, it might be helpful to add CSS styles that target both existing and upcoming elements.

It's hard to say for certain if this is the root cause of the issue.

Best of luck with resolving it.

Retrieve and modify the various elements belonging to a specific category

Answer №1

Similar questions

What could be the reason for the counter not being incremented when the button is clicked

Retrieve a file from an AWS S3 bucket using AngularJS

The element is unclickable due to being obstructed by another element

Enhancing Image Quality in Microsoft Edge

The size of table cells automatically adjusts when zooming in the browser

Choose the div element that is immediately before the current div

The Contact Page is displaying improperly on Google Chrome Browser

Adjust the body class dynamically based on the URL in AngularJS

The element's position remains unchanged after the .click re-event in the function

Efficiently Populating Arrays Without Blocking

Do specific href values need to be specified for document.links to return links?

implementing static routing and user authentication in an Express application

Obtain URL parameters prior to rendering with Next.js on the server side

What is the most effective way to obtain a customer's latitude and location by prompting them to drop a pin on Google Maps?

What is the reason the .clearfix class fails to properly clear a floated element?

Concealing the side navigation menu with HTML and CSS

The HTML element failed to be inserted

What is the best way to pick an option from a dropdown menu using angularjs?

What is the best way to make content stretch to 100% width when there is no content in the sidebar?

Error: Property 'config' cannot be accessed because it is null