cómo eliminar cada estilo del elemento?

Question

Por 'eliminar' me refiero a restablecer todo el estilo que puede descender en dicho elemento y ponerlo en los valores predeterminados del navegador.

Necesito esto para la depuración, no sé qué regla está causando daño y lo que sí es bueno es eliminar todos los estilos y luego perder la restricción uno por uno para comprobar cuándo las cosas comienzan a salir mal.

¿Ha visto alguna fragmentos en la web que consistiría en:

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

y así sucesivamente a través de cada estilo posible.

Answer 1

No se puede. Existe el valor initial propuesto en los borradores de CSS3, pero incluso si estuviera definido, establecería las propiedades a los valores iniciales definidos en las especificaciones de CSS, no según lo definido por los valores predeterminados del navegador. Por ejemplo, el valor inicial de la propiedad display es inline, pero seguramente los navegadores no procesan todo como elementos en línea de forma predeterminada.

Un mejor enfoque para su problema original es utilizar herramientas de depuración e inspección como Firebug o Web Developer Extension para Firefox. Le permiten ver qué estilos se aplican a un elemento y de dónde provienen.

Answer 2

Use una hoja de estilo de reinicio que se carga antes que todas sus otras hojas de estilo.

utilizar una versión modificada del http://meyerweb.com/eric/tools/css/reset/

Answer 3

Si está en Chrome/Safari, initial funciona bien para lo que quiere hacer. Después de configurarlo, verá el estilo activo como initial y el estilo calculado como predeterminado del navegador.

Pero para establecer los estilos activos a los valores predeterminados, cree un elemento temporal y establezca las propiedades de los elementos en los valores temporales.

Demostración: http://jsfiddle.net/ThinkingStiff/Yb9J9/

Guión:

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; 
} 

Salida:

Answer 4

prueba esto. hacer una clase llamada algo como esto y luego usarlo

.reset-this { 
    animation : none; 
    animation-delay : 0; 
    animation-direction : normal; 
    animation-duration : 0; 
    animation-fill-mode : none; 
    animation-iteration-count : 1; 
    animation-name : none; 
    animation-play-state : running; 
    animation-timing-function : ease; 
    backface-visibility : visible; 
    background : 0; 
    background-attachment : scroll; 
    background-clip : border-box; 
    background-color : transparent; 
    background-image : none; 
    background-origin : padding-box; 
    background-position : 0 0; 
    background-position-x : 0; 
    background-position-y : 0; 
    background-repeat : repeat; 
    background-size : auto auto; 
    border : 0; 
    border-style : none; 
    border-width : medium; 
    border-color : inherit; 
    border-bottom : 0; 
    border-bottom-color : inherit; 
    border-bottom-left-radius : 0; 
    border-bottom-right-radius : 0; 
    border-bottom-style : none; 
    border-bottom-width : medium; 
    border-collapse : separate; 
    border-image : none; 
    border-left : 0; 
    border-left-color : inherit; 
    border-left-style : none; 
    border-left-width : medium; 
    border-radius : 0; 
    border-right : 0; 
    border-right-color : inherit; 
    border-right-style : none; 
    border-right-width : medium; 
    border-spacing : 0; 
    border-top : 0; 
    border-top-color : inherit; 
    border-top-left-radius : 0; 
    border-top-right-radius : 0; 
    border-top-style : none; 
    border-top-width : medium; 
    bottom : auto; 
    box-shadow : none; 
    box-sizing : content-box; 
    caption-side : top; 
    clear : none; 
    clip : auto; 
    color : inherit; 
    columns : auto; 
    column-count : auto; 
    column-fill : balance; 
    column-gap : normal; 
    column-rule : medium none currentColor; 
    column-rule-color : currentColor; 
    column-rule-style : none; 
    column-rule-width : none; 
    column-span : 1; 
    column-width : auto; 
    content : normal; 
    counter-increment : none; 
    counter-reset : none; 
    cursor : auto; 
    direction : ltr; 
    display : inline; 
    empty-cells : show; 
    float : none; 
    font : normal; 
    font-family : inherit; 
    font-size : medium; 
    font-style : normal; 
    font-variant : normal; 
    font-weight : normal; 
    height : auto; 
    hyphens : none; 
    left : auto; 
    letter-spacing : normal; 
    line-height : normal; 
    list-style : none; 
    list-style-image : none; 
    list-style-position : outside; 
    list-style-type : disc; 
    margin : 0; 
    margin-bottom : 0; 
    margin-left : 0; 
    margin-right : 0; 
    margin-top : 0; 
    max-height : none; 
    max-width : none; 
    min-height : 0; 
    min-width : 0; 
    opacity : 1; 
    orphans : 0; 
    outline : 0; 
    outline-color : invert; 
    outline-style : none; 
    outline-width : medium; 
    overflow : visible; 
    overflow-x : visible; 
    overflow-y : visible; 
    padding : 0; 
    padding-bottom : 0; 
    padding-left : 0; 
    padding-right : 0; 
    padding-top : 0; 
    page-break-after : auto; 
    page-break-before : auto; 
    page-break-inside : auto; 
    perspective : none; 
    perspective-origin : 50% 50%; 
    position : static; 
    /* May need to alter quotes for different locales (e.g fr) */ 
    quotes : '\201C' '\201D' '\2018' '\2019'; 
    right : auto; 
    tab-size : 8; 
    table-layout : auto; 
    text-align : inherit; 
    text-align-last : auto; 
    text-decoration : none; 
    text-decoration-color : inherit; 
    text-decoration-line : none; 
    text-decoration-style : solid; 
    text-indent : 0; 
    text-shadow : none; 
    text-transform : none; 
    top : auto; 
    transform : none; 
    transform-style : flat; 
    transition : none; 
    transition-delay : 0s; 
    transition-duration : 0s; 
    transition-property : none; 
    transition-timing-function : ease; 
    unicode-bidi : normal; 
    vertical-align : baseline; 
    visibility : visible; 
    white-space : normal; 
    widows : 0; 
    width : auto; 
    word-spacing : normal; 
    z-index : auto; 
    /* basic modern patch */ 
    all: initial; 
    all: unset; 
} 

Originalmente desde aquí: Reset/remove CSS styles for element only