Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to remove every style from element?

Tags:

css

By 'remove' I mean resetting all the style that may descend on such element and put it to browser defaults.

I need this for debug, I don't know what rule is causing harm and I thing good approach is to remove all styles and then loose the restriction one by one to check when things start to go wrong.

Have you seen any snippets on the web that would consist of:

{ right: auto !important; left: auto !important; visibility: visible !important;...

and so on through every possible style.

like image 488
rsk82 Avatar asked Oct 10 '22 01:10

rsk82


2 Answers

You cannot. There’s the value initial proposed in CSS3 drafts, but even if it were defined, it would set properties to the initial values defined in CSS specifications, not as defined by browser defaults. For example, the initial value of the display property is inline, but surely browsers don’t render everything as inline elements by default.

A better approach to your original problem is to use debugging and inspecting tools like Firebug or Web Developer Extension for Firefox. They let you see which styles apply to an element and where they come from.

like image 57
Jukka K. Korpela Avatar answered Oct 13 '22 11:10

Jukka K. Korpela


If you're on Chrome/Safari, initial works just fine for what you want to do. After setting it, you'll see the active style as initial and the the computed style as the browser default.

But to set the active styles to the default, create a temporary element and set your element properties to the the temporary values.

Demo: http://jsfiddle.net/ThinkingStiff/Yb9J9/

Script:

Element.prototype.setDefaultStyles = function () {
    var element = document.createElement( this.tagName ),
        styles = window.getComputedStyle( element ),
        display = styles.getPropertyValue( 'display' );
    element.style.display = 'none';
    document.body.appendChild( element );

    for( style in styles ) {
        this.style[styles[style]] = styles.getPropertyValue(styles[style]);   
    };

    this.style.display = display;
    document.body.removeChild( element );
};

document.getElementById( 'unstyled' ).setDefaultStyles();

HTML:

<div id="styled">styled</div>
<div id="unstyled">unstyled</div>

CSS:

#styled, #unstyled {
    border: 1px solid red;
    color: green;
    width: 100px;
    height: 50px;
}

Output:

enter image description here

like image 39
ThinkingStiff Avatar answered Oct 13 '22 12:10

ThinkingStiff