Überschreiben Sie element.style mit CSS

Question 1

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?

Question 2

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.

Question 3

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

Question 4

element.style kommt aus dem Markup.

<li style="display: none;">

Entfernen Sie einfach das styleAttribut aus dem HTML.

Question 5

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

color: #7D7D7D;

zu

color: #7D7D7D !important;

Das sollte es tun.

Question 6

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.

Question 7

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

Question 8

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

Question 9

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

Answer 1

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

Answer 2

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

Answer 3

2

Wie können Sie die Quelle finden?

Shailen

Answer 4

2

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

Maahd

Answer 5

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

Answer 6

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

Answer 7

17

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

DiscoInfiltrator

Answer 8

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

Answer 9

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

Folktrash

Answer 10

1

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

jag

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

DW

Answer 15

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

Eiswasser

Answer 16

1

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

jonyB

Answer 17

5

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

color: #7D7D7D;

zu

color: #7D7D7D !important;

Das sollte es tun.

user2677440
quelle

Answer 18

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.

Answer 19

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

Answer 20

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

Answer 21

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

Überschreiben Sie element.style mit CSS

Antworten: