javascript - removeattribute - eliminar/restablecer css heredado de un elemento

title css

Question

Sé que esta pregunta se hizo antes, pero antes de marcarla como un duplicado, quiero decirles que mi situación es un poco diferente a la que encontré en Internet.

Estoy creando un script integrado que la gente puede poner en sus sitios. Este script crea un div con un cierto ancho / alto y cierta información en él.

Mi problema es que algunos sitios web declaran estilos para div heredados también por mi div.

por ejemplo:

div{
    background-color:red;
}

así que si no configuro ningún color de fondo para mi div, se mostrará en rojo incluso si no quiero eso.

La única solución que vengo es sobrescribir tantas propiedades CSS, de esta manera mi div se mostrará exactamente como quiero. El problema con esta solución es que hay demasiadas propiedades de css para sobrescribir y quiero que mi script sea lo más liviano posible.

Así que mi pregunta es si conoces otra solución a mi problema. Puede estar en css / javascript / jQuery.

Gracias

Answer 1

Intente esto: cree un div normal sin ningún estilo o contenido fuera del div rojo. Ahora puede usar un bucle sobre todos los estilos del div llano y asignarlos luego a su div interno para restablecer todos los estilos.

Por supuesto, esto no funciona si alguien asigna estilos a todos los div s (es decir, sin usar una clase. CSS sería div { ... } ).

La solución habitual para problemas como este es darle a tu div una clase distinta. De esa manera, los diseñadores web de los sitios pueden ajustar el estilo de su div para que se ajuste al resto del diseño.

Answer 2

No es posible "reiniciar" los estilos para un elemento específico, tendrá que sobrescribir todos los estilos que no desee o necesite. Si lo hace directamente con css o usando jquery para aplicar los estilos, dependerá de lo que sea más fácil para usted (pero no recomiendo usar javascript/jquery para esto, ya que es completamente innecesario).

Si su div es algún tipo de "widget" que puede incluirse en otros sitios, podría intentar incluirlo en un iframe . esto "restablecerá" los estilos, ya que su contenido es otro documento, pero tal vez esto afecte cómo funciona su widget (o tal vez lo rompa por completo), por lo que esto podría no ser posible en su caso.

Answer 3

Podrías intentar sobrescribir el CSS y usar auto

No creo que esto funcione con el color específicamente, pero me encontré con un problema en el que tenía una propiedad principal como

.parent {
   left: 0px;
}

y luego pude definir a mi hijo con algo como

.child {
   left: auto;
}

y efectivamente "resetea" la propiedad.

Answer 4

Por lo que entiendo, usted quiere usar un div que hereda de otra clase que no sea la suya. Como se mencionó en la respuesta anterior, no puede restablecer completamente una herencia div. Sin embargo, lo que funcionó para mí con ese problema fue usar otro elemento, uno que no es frecuente y ciertamente no se usa en la página html actual. Un buen ejemplo es usar en lugar de personalizarlo para que se vea como lo haría su ideal.

area { background-color : red; }

Answer 5

Puede utilizar esta opción a continuación.

<style>
  div:not(.no_common_style){
      background-color:red;
  }
</style>

ahora, si hay un lugar donde no desee aplicar el estilo predeterminado, puede usar la clase ''no_common_style'' como clase. ex:

<div class="no_common_style">
  It will not display in red
</div>

Answer 6

Sólo establece las propiedades CSS relevantes / importantes.

Ejemplo (solo cambia los atributos que pueden hacer que tu div se vea completamente diferente):

background: #FFF;
border: none;
color: #000;
display: block;
font: initial;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
word-spacing: normal;
z-index: auto;

Elija un selector muy específico, como div#donttouchme , <div id="donttouchme"></div> . Además, puede agregar `! Important antes de cada punto y coma en la declaración. Cuando esta opción falla, sus clientes intentan desordenar deliberadamente su distribución.

Answer 7

Siempre que sean atributos como clases e identificadores, puede eliminarlos mediante los modificadores de clase javascript / jQuery.

document.getElementById("MyElement").className = "";

No hay forma de eliminar etiquetas CSS específicas que no sean sobrescribirlas (o usar otro elemento).

Answer 8

Un enfoque simple sería usar el modificador !important en css, pero esto puede ser anulado de la misma manera por los usuarios.

Tal vez se pueda lograr una solución con jquery recorriendo todo el DOM para encontrar sus clases (re) definidas y eliminando / forzando estilos css.