Überschreiben Sie element.style mit CSS

83

Ich habe eine HTML-Seite vom Seitenersteller, styledie dem Element Attribute direkt hinzufügt. Ich fand es gilt als element.style.

Ich möchte es mit CSS überschreiben. Ich kann das Element abgleichen, aber es überschreibt es nicht.

Bildschirmfoto

Wie kann ich den Stil mithilfe von CSS überschreiben?

css

— DW
quelle

2

Finden Sie die Quelle der Stilinjektion und entfernen Sie sie? Wenn es nicht in Ihrer Dokumentquelle enthalten ist, stammt es wahrscheinlich irgendwo aus JavaScript.

— Cimmanon

2

Wie können Sie die Quelle finden?

— Shailen

2

Befehl + Shift + F (auf einem Mac) oder Strg + Shift + F (auf einem PC)

— Maahd

Beachten Sie, dass eine Alternative in JS darin bestehen kann, die hinzugefügte Eigenschaft mit removeProperty()ieeg zu entfernen. document.querySelector("li").style.removeProperty("display"); Dann müssen Sie auch keinen neuen Standardwert angeben (wie Sie es tun müssen !important, aber die Vererbungskette "springt einfach ein".

— rugk

121

Obwohl es oft verpönt ist, können Sie technisch verwenden:

display: inline !important;

Dies ist im Allgemeinen keine gute Praxis, kann jedoch in einigen Fällen erforderlich sein. Sie sollten Ihren Code so bearbeiten, dass Sie den <li>Elementen überhaupt keinen Stil zuweisen.

— DiscoInfiltrator
quelle

17

element.style bedeutet, dass es im Markup ist, also würden Sie in Ihrem HTML sehen<li style="display: none;">

— DiscoInfiltrator

1

Zeigen Sie in jQuery bei Verwendung der show () -Methode Folgendes an: block; wird auf die Elementstile angewendet. Ich wollte, dass es angezeigt wird: Inline-Block; obwohl. Ich habe es zuerst gelöst, indem ich diese Methode nicht verwendet habe und .css ('display', 'inline-block') verwendet habe. stattdessen. Nachdem ich dieses Beispiel gelesen habe, denke ich jedoch, dass ich auf! Important umsteigen werde.

— Simon Bengtsson

jQuery setzt die Anzeigeeigenschaft auf den Standardwert für das angezeigte Element.

— Folktrash

1

Wörtlich nur "gtf outta here" ausgerufen, als dies für mich funktionierte, verärgerte meine Freundin

— jag

2

Die meisten dieser Kommentare setzen voraus, dass sie Zugriff auf den Quellcode haben. Ich würde diese schlechten Praktiken nicht anwenden müssen, wenn Codierer keine Bibliotheken mit hinzugefügten Inline-Stilen herausgeben würden.

— TallOrderDev

20

Dieses CSS überschreibt sogar das JavaScript:

#demofour li[style] {
    display: inline !important;
}

oder nur für den ersten

#demofour li[style]:first-child {
    display: inline !important;
}

— Kuldar Leement
quelle

12

element.style kommt aus dem Markup.

<li style="display: none;">

Entfernen Sie einfach das styleAttribut aus dem HTML.

— Ayman Safadi
quelle

Ich füge nicht hinzu <li style = "display: none;">

— DW

Es ist irgendwo injiziert. Ich suche es auch, ich denke, Google Maps macht dies D:

— Eiswasser

1

Wenn es injiziert wird, als er es nicht erreichen und selbst entfernen kann, muss er es überschreiben

— jonyB

5

Die Verwendung von! Importal überschreibt element.style über CSS wie Change

color: #7D7D7D;

zu

color: #7D7D7D !important;

Das sollte es tun.

— user2677440
quelle

5

Natürlich ist hier der! Wichtige Trick entscheidend, aber eine gezielte Ausrichtung kann nicht nur dazu beitragen, dass Ihre Überschreibung tatsächlich angewendet wird (Gewichtskriterien können über! Wichtig herrschen), sondern auch, dass unbeabsichtigte Elemente nicht überschrieben werden.

Identifizieren Sie mit den Entwicklertools Ihres Browsers den genauen Wert des fehlerhaften Stilattributs. z.B:

"font-family: arial, helvetica, sans-serif;"

oder

"display: block;"

Entscheiden Sie dann, welchen Zweig von Selektoren Sie überschreiben möchten. Sie können Ihre Auswahl erweitern oder einschränken, um sie an Ihre Bedürfnisse anzupassen, z.

p span

oder

section.article-into.clearfix p span

Verwenden Sie abschließend in Ihrer custom.css den Selektor [attribute ^ = value] und die! Important-Deklaration:

p span[style^="font-family: arial"] {
  font-family: "Times New Roman", Times, serif !important;
}

Beachten Sie, dass Sie nicht den gesamten Wert des Stilattributs angeben müssen, gerade genug, um eindeutig mit der Zeichenfolge übereinzustimmen.

— ersaloz
quelle

0

Meines Wissens nach steht das Inline-System an erster Stelle, sodass die CSS-Klasse nicht funktionieren sollte.

Verwenden Sie Jquery als

$(document).ready(function(){

   $("#demoFour li").css("display","inline");
  });

You can also try 

#demoFour li { display:inline !important;}

— user1990587
quelle

0

Verwenden Sie JavaScript.

Zum Beispiel:

var elements = document.getElementById("demoFour").getElementsByTagName("li");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "inline";
}

— Kenta Kubo
quelle

0

Sie können den Stil in Ihrem CSS überschreiben, indem Sie auf die beleidigende Eigenschaft des Elementstils verweisen. In meinem Fall sind diese beiden Codes auf 15 Pixel eingestellt und mein Hintergrundbild wird schwarz. Also überschreibe ich sie mit 0px und platziere das! Wichtig, damit es Priorität hat

.content {
    border-bottom-left-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
}

— Tesla-Spule
quelle