Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Remove all css styles using Javascript without removing the class

Is there a way to remove all CSS styles from a specific selector using Javascript, without removing the selector itself from the element?

The issue is that I’d like to add my own class to an element to handle the styling, but the element is created by a WordPress plugin and there are already classes on the element that overwrite mine. I cannot remove the original classes because they’re also being used for Javascript.

Normally I’d give up and just stick !important on everything in my class, which I can still do if there’s no other way, but the original classes have practically EVERYTHING defined, in multiple pseudo states, so I’d have to list out everything from color: to border-bottom-right-radius: with !important after it (including on :focus and :hover and everything) in order to overwrite all the original styles.

Basically I have this:

<button class="original-class-1 original-class-2">Button</button>

<style>
    .my-styles {
        color: #fafafa;
        background-color: #090909;
        border: 1px solid;
     }

    .original-class-1 {
        color: #000000;
        background-color: #ffffff;
        border-width: 1px;
        border-style: solid;
        ...
        ...
        etc-with-everything-but-the-kitchen-sink: killme;
     }

     .original-class-2 {
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        ...
        ...
        etc-with-even-more-stuff: why;
     }
</style>

and I want

<button class="original-class-1 original-class-2 my-styles">Button</button>

<style>
     .my-styles {
        color: #fafafa;
        background-color: #090909;
        border: 1px solid;
     }

     .original-class-1 {
     }

     .original-class-2 {
     }
</style>

At the moment I have something like this started:

const buttons = document.querySelectorAll('.original-class-1');

for (const button of buttons ) {
    
    button.style.removeAllProperties(); // Does something like this exist?
    button.classList.add('my-styles');
    
}

To be clear, the original classes are adding styles from an external stylesheet, I’ve only put them in <style> tags above for illustration purposes.

Tags:

4

Answers


  1. 0

    The button elements in the example provided are styled using classes, not the element’s "style" attribute. Since the button elements are styled using classes, you could try modifying the "class" attribute on the buttons.

    window.onload = () => {
  const buttons = document.querySelectorAll('.original-class-1');
  buttons.forEach(button => button.setAttribute('class', 'my-styles'));
}
    .original-class-1 {
  color: #000000;
  background-color: red;
  border-width: 1px;
  border-style: solid;
}

.original-class-2 {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

.my-styles {
  color: #fafafa;
  background-color: #090909;
  border: 1px solid;
}
    <button class="original-class-1 original-class-2">Button</button>

    As you can see here, the button element now has your .my-styles and does not have either of the original classes.

    I’m unfamiliar with WordPress, this may be better approached through their tooling rather than manipulating your DOM in this way. Best of luck.

    ref: Element.setAttribute()

    EDIT:
    If you want to get really hacky, you could always do something interesting like the following: ( I don’t recommend you do this 🙂 )

    window.onload = () => {
    const targetClass = Object.values(document.styleSheets[0].cssRules).find((rule) => rule.selectorText == '.very-red');
    if (targetClass) {
        Object.values(targetClass.style).forEach((property) => targetClass.style.removeProperty(property));
    };
}
    .very-red {
  color: #000000;
  background-color: red;
}
    <button class="very-red">Very Not Red Button</button>
    Login or Signup to reply.
  2. 0

    rewriting the stylesheet with js

    This is an unconventional approach that may have unforeseen effects but it uses javascript to re-write the relevant style sheet leaving empty rule sets for all selectors except those you have added (which must be identifiable by containing some constant label as part of their names, a .my- prefix in this example).

    Style sheets are html elements like any other and can be accessed, and have their content manipulated, using javascript.

    You will have to do some exploratory work by (reporting to console) each of the elements in the collection of style elements extracted in order to focus on the relevant sheet(s). Here, the collection relevant to the snippet tools style panel was easily found to be index [0], hence its use in the example.

    If the steps are not clear, leave a comment and I’ll explain each part’s purpose.

    let styleSheetCollections = document.getElementsByTagName('style');

let stylesText = styleSheetCollections[0].innerHTML;
const stylesBlockArray = stylesText.split("{");
let keepNext = false;

for (let i=1; i<stylesBlockArray.length; i++) {

if (!keepNext) {
stylesBlockArray[i]=stylesBlockArray[i].slice(stylesBlockArray[i].indexOf("}")-1);
} // end if;

if (stylesBlockArray[i].indexOf("my-") > -1) {keepNext = true;} else {keepNext = false};

} // next block;

newInnerText = stylesBlockArray.join("{");

console.log(newInnerText);

// replace style sheet innerText
// styleSheetCollections[0].innerText = newInnerText;
    .original-class-1 {
        color: #000000;
        background-color: #ffffff;
        border-width: 1px;
        border-style: solid;
        ...
        ...
        etc-with-everything-but-the-kitchen-sink: killme;
     }
     
     .my-p_style {
       font-size: 12px;
       border: 0;
     }

     .my-h1_style {
       font-size: 22px;
       background: yellow;
     }
     
     .original-class-2 {
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        ...
        ...
        etc-with-even-more-stuff: why;
     }

     .my-styles {
        color: #fafafa;
        background-color: #090909;
        border: 1px solid;
     }

    You would uncomment the assignment back to the stylesheet in the last line when done.

    Login or Signup to reply.
  3. 0

    Using Window.getComputedStyle() which returns a CSSStyleDeclaration Object, you could simply iterate the key/value pairs setting all to "initial".

    const button = document.querySelector("button");


const element = document.getElementsByClassName("myclass")[0];
const cssObj = window.getComputedStyle(element);




button.addEventListener('click', function(e) {
  for (x in cssObj) {
    cssObjProp = cssObj.item(x)
    let val = cssObj.getPropertyValue(cssObjProp);
    element.style.setProperty(val, "initial");
  }
});
    .myclass {
  font-size: xxx-large;
  color: red;
}
    <p class=myclass>Testing one two.</p>
<button>Fire JavaScript</button>
    Login or Signup to reply.
  4. 0

    You could try experimenting with all: revert, or all: initial in CSS to reset styles from within the CSS rules of a custom class, before presenting actual rules for the class.

    This snippet experiments with revert rather than initial (go with what works), using exaggerated styles to make changes obvious.

    .original-class-1 {
    color: #000000;
    background-color: limegreen;
    border-width:7px;
    border-style: solid;
    /* plus more */
}
.original-class-1:hover {
   border-style: dashed;
}


.original-class-2 {
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    /* plus more */
 
}

.my-styles, .my-styles:hover {
    all: revert;
    color: #fafafa;
    background-color: #090909;
    border: 3px solid red;
}
    <button class="original-class-1 original-class-2">Button</button>
<button class="original-class-1 original-class-2 my-styles">Button2</button>

    Pseudo element selectors didn’t appear to respond to wild cards after the colon, say to specify rules for a mythical ".my-style:*" selector, hence the explicit duplication of .my-style rules for the .my-style:hover selector.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search