Is possible to make an important property value fr

问题:

Is possible to make an important property value from CSS selector a non important one?

---

For example: Bootstrap 3 defines .hide class as:

 .hide { display: none !important; }

Is possible to remove the important value without modifying the BS3 source code?

Thinking at somethingl iike

 .hide { display: none !remove-important; }

---

Note that I want to keep the same value! I don't want to set block !important to .hide class because that would not be correct...

I already added a new class .hide-non-important and used it where it was needed:

 .hide-not-important { display: none; }

...but the question is: is there any alternative to this?

回答1:

You don't need to edit the original source code. Just create a stylesheet and place it after the Bootstrap stylesheets and add this to it:

 .hide { display: block !important; }

Now, having said this, I would be very careful about doing this. You don't know how many elements across your site have applied this class, and you will almost certainly get unanticipated results.

There is obviously a reason that this class has been applied, I would suggest either:

1. don't do this

2. add some other class to the element and add styles to that. Adjust your markup (or use js to apply the class if need be) to something like:

   <div class="hide custom-hide-reset"></div>
   

   Then add this style to the stylesheet you've created:

   .custom-hide-reset { display: none; }
   

回答2:

You can overwrite this with:

 body .hide { display: none !important; }

 .someclass.hide { display: none !important; }

those two examples have higher priority

回答3:

The stylesheet objecs are accessible from javascript

var sheets = document.styleSheets

Once you have the stylesheet array, you can iterate over the rules

var rules = sheets[i].cssRules || sheets[i].rules // browser dependency

Each rule has a style property, which is mutable in the usual way.

rule.style[cssPropName] = value;

There is a method on the sheet to delete a rule by index, either deleteRule or removeRule, depending on the browser.

Bottom line, you can find the rule and either edit it or delete and re-add it in a modified form.

Reference: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml#.Ujsin4ZmjAs

回答4:

Since the question can be splitted in

• how can I remove !important from a rule applied to my page but
• without changing its value and
• without editing the original CSS file

For pure spirit of adventure only, I think it would be possible in the following way:

1. load the CSS with jQuery;
2. perform a replacement of its content, by searching .hide { display: none !important; } and replacing it with .hide { display: none; };
3. apply the new in-memory altered CSS to the page.

Taking for good the solution posted in this answer, it could be modified with something (totally untested, just to get the idea) like:

$.get(myStylesLocation, function(css)
{
   var alteredCss = css.replace(".hide { display: none !important; }",".hide { display: none; }");
   $('<style type="text/css"></style>')
      .html(alteredCss)
      .appendTo("head");
});

回答5:

You can override the current !important value by another one like

.col{ color:red !important; }
.col{ color:green; } // wont work
.col{ color:blue !important; } // will work and set color blue instead of red

DEMO.

Update :

This question is not about JavaScript but as an alternative you can accomplish the task using these technique, remove the rule using JavaScript and then add a new rule again.

function getCSSRule(ruleName, deleteFlag) {               
   ruleName=ruleName.toLowerCase();                       
   if (document.styleSheets) {                            
      for (var i=0; i<document.styleSheets.length; i++) { 
          var styleSheet=document.styleSheets[i];          
         var ii=0;                                        
         var cssRule=false;                               
         do {                                             
            if (styleSheet.cssRules) {                    
                cssRule = styleSheet.cssRules[ii];         
            } else {                                      
                cssRule = styleSheet.rules[ii];            
            }                                             
            if (cssRule)  {                               
                if (cssRule.selectorText.toLowerCase()==ruleName) { 
                    if (deleteFlag=='delete') {             
                        if (styleSheet.cssRules) {           
                            styleSheet.deleteRule(ii);        
                        } else {                             
                            styleSheet.removeRule(ii);        
                        }                                    
                        return true;                         
                    } else {                                
                    return cssRule;                      
                }                                       
            }                                          
        }                                             
        ii++;                                         
        } while (cssRule)                                
      }                                                   
   }                                                      
   return false;                                          
}                                                         

function killCSSRule(ruleName) {                          
    return getCSSRule(ruleName,'delete');                  
}                                                         

function addCSSRule(ruleName, v) {                        
    if (document.styleSheets) {                            
        if (!getCSSRule(ruleName)) {                        
            if (document.styleSheets[0].addRule) {           
                document.styleSheets[0].addRule(ruleName, v,0);
            } else {                                         
                document.styleSheets[0].insertRule(ruleName+'{'+v+'}', 0);
            }                                                
        }                                                   
    }                                                      
   return getCSSRule(ruleName);
}
// Check the rule before deleting
console.log(getCSSRule('.col')); // .col { color:red !important; }
// At first remove the current rule
killCSSRule('.col');
// Now assign nre rule
addCSSRule('.col', 'color: red');
// Check the rule after deleting
console.log(getCSSRule('.col')); // .col { color:red; }

DEMO. ( Source : Totally Pwn CSS with Javascript )