wake-up-neo.com

geerbte CSS aus einem Element entfernen/zurücksetzen

Ich weiß, dass diese Frage schon einmal gestellt wurde, aber bevor ich sie als Duplikat markiere, möchte ich Ihnen sagen, dass sich meine Situation etwas von der im Internet gefundenen unterscheidet.

Ich baue und baue ein Skript ein, das die Leute auf ihren Websites veröffentlichen können. Dieses Skript erstellt ein Div mit einer bestimmten Breite/Höhe und einigen Informationen.

Mein Problem ist, dass einige Websites Styles für div deklarieren, die auch von meinem div übernommen werden.

zum Beispiel:

div{
    background-color:red;
}

wenn ich also keine Hintergrundfarbe für mein div setze, wird es rot angezeigt, auch wenn ich das nicht will.

Die einzige Lösung, die ich dabei finde, ist, so viele CSS-Eigenschaften zu überschreiben, dass mein Div genau so angezeigt wird, wie ich es will ... Das Problem bei dieser Lösung ist, dass es zu viele CSS-Eigenschaften gibt, die überschrieben werden sollen, und ich möchte, dass mein Skript ist so leicht wie es nur geht.

Meine Frage ist also, ob Sie eine andere Lösung für mein Problem kennen ... es kann in css/javascript/jQuery sein.

Vielen Dank

29
Doua Beri

Das "Zurücksetzen" von Stilen für ein bestimmtes Element ist nicht möglich, Sie müssen alle Stile überschreiben, die Sie nicht benötigen/benötigen. Wenn Sie dies direkt mit css oder mit jquery zum Anwenden der Stile tun, hängt es davon ab, was für Sie einfacher ist (aber ich würde nicht empfehlen, javascript/jquery zu verwenden, da dies völlig unnötig ist).

Wenn es sich bei Ihrem div um eine Art "Widget" handelt, das in andere Websites aufgenommen werden kann, können Sie versuchen, es in ein iframe zu packen. Dadurch werden die Stile "zurückgesetzt", da ihr Inhalt ein anderes Dokument ist. Dies hat jedoch möglicherweise Auswirkungen auf die Funktionsweise Ihres Widgets (oder zerstört es möglicherweise vollständig). In Ihrem Fall ist dies möglicherweise nicht möglich.

17
oezi

Legen Sie nur die relevanten/wichtigen CSS-Eigenschaften fest.

Beispiel (ändern Sie nur die Attribute, wodurch Ihr div möglicherweise völlig anders aussieht):

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;

Wählen Sie einen ganz bestimmten Selektor aus, wie beispielsweise div#donttouchme, <div id="donttouchme"></div>. Zusätzlich können Sie vor jedem Semikolon in der Deklaration ein wichtiges "!" Hinzufügen. Ihre Kunden versuchen absichtlich, Ihr Layout durcheinander zu bringen, wenn diese Option fehlschlägt.

11
Rob W

Sie könnten versuchen, das CSS zu überschreiben und auto zu verwenden

Ich glaube nicht, dass dies speziell mit Farbe funktionieren wird, aber ich bin auf ein Problem gestoßen, bei dem ich eine übergeordnete Eigenschaft wie. Hatte

.parent {
   left: 0px;
}

und dann konnte ich mein Kind einfach mit so etwas definieren

.child {
   left: auto;
}

und es "setzt" effektiv die Eigenschaft zurück.

7
Seth

Versuchen Sie Folgendes: Erstellen Sie ein einfaches div ohne Stil und Inhalt außerhalb des roten div. Jetzt können Sie eine Schleife über alle Stile der Ebene div verwenden und dann Ihrem inneren div zuweisen, um alle Stile zurückzusetzen.

Natürlich funktioniert das nicht, wenn jemand allen divs Stile zuordnet (d. H. Ohne eine Klasse zu verwenden. CSS wäre div { ... }).

Die übliche Lösung für Probleme wie diese ist, Ihrem div eine eigene Klasse zu geben. Auf diese Weise können Webdesigner der Websites die Gestaltung Ihres div anpassen, um sie in den Rest des Designs zu integrieren.

1
Aaron Digulla

Nach meinem Verständnis möchten Sie ein Div verwenden, das von keiner Klasse als Ihrer erbt. Wie in der vorherigen Antwort erwähnt, können Sie eine div-Vererbung nicht vollständig zurücksetzen. Bei diesem Problem funktionierte für mich jedoch die Verwendung eines anderen Elements - eines, das nicht häufig ist und in der aktuellen HTML-Seite sicherlich nicht verwendet wird. Ein gutes Beispiel ist die Verwendung statt der Anpassung, um genau so zu aussehen, wie es Ihr Ideal wäre.

area { background-color : red; }

sie können diese Option verwenden.

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

wenn Sie jedoch keinen Standardstil verwenden möchten, können Sie die Klasse 'no_common_style' als Klasse . verwenden. ex:

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

Solange es sich um Attribute wie Klassen und IDs handelt, können Sie sie mit den Modifikatoren Javascript/jQuery entfernen.

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

Es gibt keine Möglichkeit, bestimmte Tag-CSS zu entfernen, außer sie zu überschreiben (oder ein anderes Element zu verwenden).

0
AlexBay