¿Cómo eliminar todos los estilos heredados y calculados de un elemento?

Question

La página tiene el siguiente CSS:

input[type=text] 
{ 
    display: inline; padding: 7px; background-color: #f6f6f6; font-size: 12px; letter-spacing: 1px; border: 1px solid #aac7d1; 
    /* lots of other styles here... */ 
} 

tengo muchos elementos de entrada de texto y los siguientes:

<input type="text" id="txt1" /> 

Y trato de aplicar diferentes estilos para el campo respectivo individuo (txt1) a través de jQuery :

$('#txt1').removeClass().removeAttr('style').css({ 
    'background-color': '#ff0000', 
    //lots of other styles here... 
}); 

Pero los estilos que provienen de la hoja de estilo no se pueden eliminar del elemento de esta manera. La regla css, input[type=text] no es una clase personalizada, por lo que removeClass() no funciona aquí, si estoy en lo cierto.

Lo que quiero hacer es; para eliminar completamente todos los estilos aplicados al elemento txt1. ¿Hay alguna manera de hacerlo diferente a la obtención de la lista de todos los estilos calculados y su configuración está vacía?

Answer 1

¿Hay una cierta manera de hacer esto

No hay manera de detener normas que se aplican a un elemento si los partidos selector.

Puede

• conjunto de todas las propiedades que desea tener un valor específico (con un selector adecuadamente específico y !important
• mover el elemento a un documento diferente (lo que podría ser cargado con, por ejemplo, un iframe).
• eliminar la regla (y por lo tanto hacer que se se aplica a cualquier elemento )
• cambio el selector en el conjunto de reglas (por lo que no coincide con el elemento más, y ou tiene que tener cuidado para asegurarse de que aún selecciona los elementos que le preocupan)

Además de recibir la lista de todos los estilos calculadas y poniéndolos vacío?

eso no funcionaría. La mayoría de las propiedades no aceptará un valor en blanco, por lo que la regla sería inválida e ignorada (lo que ocasionaría que la regla anterior se aplique nuevamente).

Answer 2

Como se puede ver en el siguiente enlace: http://www.w3.org/TR/CSS2/cascade.html#specificity, todos los selectores tiene valor de especificidad. Por lo tanto, si escribe dicha regla css: #txt1 {}, puede restablecer todos los valores innecesarios.