Remove all css styles using Javascript without removing the class-CodePudding

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 >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 >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.

CodePudding user response：

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 >Button</button>
<button >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.

CodePudding user response：

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.

CodePudding user response：

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>

CodePudding user response：

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 >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 >Very Not Red Button</button>