Remove CSS Rules by JavaScript

Remove CSS rules by JavaScript

here is an example how you can do this:

var styleTag = document.getElementById ("the-style");
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

if (sheet.cssRules) { // all browsers, except IE before version 9
    for (var i=0; i<sheet.cssRules.length; i++) {
        if (sheet.cssRules[i].selectorText === '#rule2 em') {        
            //console.log(sheet.cssRules[i]);
            sheet.deleteRule (i);
        }
    }  
}
else 
{  // Internet Explorer before version 9
    for (var i=0; i<sheet.rules.length; i++) {
        if (sheet.rules[i].selectorText === '#rule2 em') {        
            // console.log(sheet.cssRules[i]);
            sheet.removeRule (i);
        }
    } 
}

And on JSFiddle http://jsfiddle.net/n53u7cvm/1/

how to remove css property using javascript?

You have two options:

OPTION 1:

You can use removeProperty method. It will remove a style from an element.

el.style.removeProperty('zoom');

OPTION 2:

You can set it to the default value:

el.style.zoom = "";

The effective zoom will now be whatever follows from the definitions set in the stylesheets (through link and style tags). So this syntax will only modify the local style of this element.

How to add and later remove or disable a CSS rule in JavaScript?

Seems like you could find an answer here on Mozilla Developer Network:

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

Inserts a new CSS rule into the current style sheet

Example:

// create a style sheet and add rule
var borderStyleSheet = document.createElement("style");
document.head.appendChild(borderStyleSheet);
borderStyleSheet.sheet.insertRule("#myElement *{ outline: 1px solid red;}", 0);

// disable rule
borderStyleSheet.disabled = true;

// enable rule
borderStyleSheet.disabled = false;

// see existing stylesheets
console.log(document.styleSheets);

How do I disable a CSS rule?

Can you make a second class and just add/remove it from your elements?

.margin {
    margin: 4px 5px 6px 7px;
    color: red;
}
.noMargin {
    margin: 0px
    color: red;
}

document.getElementById("class").classList.add('margin');    
document.getElementById("class").classList.remove('noMargin');

document.getElementById("class").classList.add('noMargin');
document.getElementById("class").classList.remove('margin');

Update or remove css rule from insertRule() in JS

To delete just use deleteRule() passing in the index that the rule was inserted at

var index = document.styleSheets[0].insertRule(`#li${i}:after {content: "${data[2][i]}"; }`, 0);
document.styleSheets[0].deleteRule(index);

In order to update a rule access the cssRules list at the index the rule was inserted at, and change the style property

document.styleSheets[0].cssRules[index].style.content = "";

Note you will not be able to access the rule if the style sheet being accessed was linked externally as cssRules will be null. So you will have to delete it and insert it back to change its styles.

Demo

var stylesheet = document.styleSheets[0];var ruleIndex = 0;
function redRule(){  stylesheet.cssRules[ruleIndex].style.color = "red";}
function blueRule(){  stylesheet.cssRules[ruleIndex].style.color = "blue";}
function replaceRule(){  stylesheet.deleteRule(ruleIndex);  ruleIndex = stylesheet.insertRule("body { color:yellow; }",0);    }
ruleIndex = stylesheet.insertRule("body { color:black; }",0);
document.addEventListener('click',function(e){ switch(e.target.id){   case 'red':     redRule();     break;   case 'blue':     blueRule();     break;   case 'replace':     replaceRule();     break; }});

<style></style>Text<br><button id="red">Change rule to red</button><br><button id="blue">Change rule to blue</button><br><button id="replace">Replace rule</button><br>

Remove CSS property completely

You can remove the original stylesheet. Just assign it an id and use jQuery.remove(...).

---

The alternate solution is to alter the first stylesheet to use some kind of namespace⁺, for example:

/* these are the rules that you want to be removed */
.stylesheet1       { }
.stylesheet1 h1    { }
.stylesheet1 p     { }
.stylesheet1 a     { }
.stylesheet1 input { }
/* these rules can co-exist with the next stylesheet */
nav                { }
article            { }
aside              { }
section            { }

Inside your HTML add the stylesheet1 class to body. When you load the other CSS file (presumably via JavaScript) then you remove this class. All namespaced rules will become ineffective.

^* CSS preprocessors e.g. SASS and LESS make it easier for you to manage these rules.

Remove CSS rule with !important property

Just add another class to the element that sets the content to another value.

document.querySelector("button").addEventListener("click", function(e){
  document.querySelector(".vjs-icon-placeholder").classList.toggle("nocontent");
});

.vjs-icon-placeholder:before{
  content: "This is some before text";
  display: block;
  color: dodgerblue;
}

.vjs-icon-placeholder.nocontent:before {
  content: " ";
}

<div class="vjs-icon-placeholder">
This is a div.
</div>
<button>
Toggle Content
</button>

Remove CSS-property which was applied through stylesheet

You cannot modify the value in the style sheet, you can override it as you did in your example

$(this).css('background', 'transparent');

or have another class in your style sheet with the desired properties and replace the classes with JS

$(this).removeClass('test');
$(this).addClass('your-other-class');

---

Related Topics