Looking for specific styles within CSS classes

I am looking to identify all the classes with styling attributes defined using either vanilla JS or jQuery. Specifically, I want to find classes that have the border style defined along with its value. It would be great if I could also modify these classes by changing or deleting the border. If needed, I can query elements using these classes and switch them to new custom classes.

I am working on an extension to customize the styling of a popular website. The issue is that all the class names are meaningless and constantly changing (they are named "class[1..n]"). This makes it challenging to target specific elements based on class names. The website also heavily uses inline styles, which I have been able to work with so far. However, there is a class (changing names from "class12" to "class26" and so on) that controls the border styling, which I want to remove. Currently, I have to navigate through the content within the border to delete the div with the border class, which is quite frustrating.

javascriptjqueryhtmlcss

Answer №1

Check out the getComputedStyle function

const element = document.querySelector('.example');
const style = getComputedStyle(element);

// DISPLAY
console.log(style.background);

// MODIFY
element.style.background = 'lightblue';
.example {
  background: yellow;
}
<div class="example">EXAMPLE</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can CSS calc() achieve modulus behavior?

Is it possible to dynamically adjust the height of an element based on screen size using calc(), while still maintaining alignment with a specified baseline grid? The height should always be a multiple of the defined variable $baseline. I've noticed ...

cssresponsive-designsassbaseline

Refreshing a component using a sibling component in React

Currently, I am delving into the realm of React and embarking on a journey to create a ToDo App. However, I've hit a snag while attempting to add a new task to the list. Despite successfully adding an item to the list upon clicking the add button, upd ...

javascriptreactjs

What is the reason for the lack of user data being saved in studio3t?

I'm struggling to identify the issue in my app development process. I'm creating an application that collects user email and password, storing them in a database. The problem lies in the fact that while user passwords are successfully stored, the ...

javascriptnode.jsexpressmongooseejs

How can I create an image of a number using Bootstrap?

I have a collection of web pages featuring tiles with various images For example: https://i.sstatic.net/HKna1.jpg Some of my pages look identical to these, but do not include any images https://i.sstatic.net/rLXPY.png In the second screenshot, each ti ...

htmlcssbootstrap-5

JavaScript tool package with non-JavaScript alternative

Currently in search of a reliable Javascript widget toolkit that boasts a modern UI design like Dojo, incorporates AJAX for navigation, and effects. Essential requirement is flexibility and seamless fallback to an HTML-only version for console users. Whi ...

javascriptajaxuser-interfacewidgettoolkit

What is the best method to determine the currency associated with the code in dinero.js?

Is there an easy way to locate the dinero currency in the dinero.js/currencies package using its code? For example, a function called getCurrency that accepts a string as input and outputs the corresponding dinero currency. ...

javascriptnode.jsdinero.js

What steps can I take to decrease the padding of this footer?

Is there a way to reduce the height of the footer so it doesn't dominate the screen on both large and small devices? https://i.sstatic.net/nIQz6.png import { Container, Box, Grid } from "@material-ui/core"; const Footer = (props) => { ...

javascriptcssreactjsmaterial-ui

The process of compressing videos and image files is done automatically in a React production build

I've recently finished building a react application and have deployed it with the production build. yarn run build serve -S build While I know it compresses the .js and .scss files, creating a build folder to serve from, I'm wondering if it also ...

javascriptreactjs

Next.js throws a ReferenceError when the self variable is not defined while creating a child process using a custom webpack configuration

Trying to create a child process in Next.js for a time-consuming operation. Here is the webpack configuration (next.config.js): const { merge } = require('webpack-merge'); module.exports = { webpack: (config, { buildId, dev, isServer, defaultL ...

javascriptnode.jswebpacknext.jsfork

AJAX not showing validation error message

For the past two days, I've been grappling with an issue and can't seem to pinpoint where it's coming from. After leaving the textbox, the Ajax call functions correctly and returns results as either true or false, triggering the success fun ...

javascriptajaxdevexpress

Showing data in table cells using CSS styling

I am working with multiple HTML tables that contain embedded Ruby code. The structure is as follows: <% loop-1 %> <table> <tr> <td rowspan=" X ">abcd</td> <td>xyz</td> </tr> <% loop- ...

htmlhtml-table

Gain access to the "computed style" of elements in a directive

I recently created a directive for a loader element, but I am facing issues with undefined styles. Is there a way to access the "computed styles" of an element within the directive? export const ElementLoader = { componentUpdated(el, binding) { if ...

javascriptvue.jsvue-directives

What are the best ways to conceptualize the benefits of WebRTC?

I encountered a peculiar issue with the abstraction of the WebRTC offer generation process. It appears that the incoming ice candidates fail to reach the null candidate. While I have been able to generate offers successfully using similar code in the past, ...

javascriptsocketsstreamwebrtcgetusermedia

What could have caused my javascript file to disappear from npm?

After creating a small library consisting of a .js file with commonly used functions, I placed it in the node_modules directory alongside my other packages. Everything seemed to be going well. A few days later, I decided to add a new package using npm ins ...

javascriptnpm

Can a SVG Animation be created featuring a progress ring with both the right and left dash offsets moving simultaneously?

Currently in my codepen, I am working on a project where I am using GSAP. If you are unfamiliar with that, no worries - just focus on the dashoffset and dasharray in the SVG circulation path. You can find this project in Codepen which is part of our premi ...

javascriptanimationsvggsap

Restricting Entry to a NodeJS Express Route

Currently, I am in the process of developing an express project where I have set up routes to supply data to frontend controllers via ajax calls, specifically those that start with /get_data. One issue I am facing is how to secure these routes from unauth ...

javascriptnode.jsajaxexpressroutes

How to Incorporate an Error Function into XPages Partial Refresh Events (dojo.xhrPost)?

I have a page that relies on multiple partial refreshes for user interaction. Rather than implementing a session keep alive mechanism, I am interested in detecting error responses from these partial refreshes to alert the user of their expired session or t ...

javascriptdojoxpages

Enhanced efficiency in the interaction between front-end JavaScript and back-end JavaScript

As a frontend developer, I find myself in the unique position of working on a project that involves processing a large amount of data in my nodeJS backend (while using reactJS for the front end). After the necessary data processing is completed in the bac ...

javascriptnode.jsreactjs

How to format values in a textarea using AngularJS

Is there a way to address the following issue without replacing \n with other values? A user can input a description for something in a textarea and include line breaks. In the controller, there is a value called description which includes a string ...

javascripthtmlangularjs

Updating State Array dynamically with React JS

I am facing an issue with updating a UseState quantity array in real time. When clicking on a button, a new array is created with updated values for a specific object's quantity. However, the original array does not update immediately. Instead, it onl ...

javascriptreactjsarraysreact-hooksreact-state