So löschen Sie CSS-Attribute in js

So verwenden Sie JavaScript zum Löschen von CSS-Attributen

Bei der Verwendung von JavaScript für die Webentwicklung ist es häufig erforderlich, CSS-Attribute zu ändern oder zu löschen. In diesem Artikel erklären wir, wie Sie CSS-Eigenschaften mithilfe von JavaScript entfernen.

1. Holen Sie sich das Element

Bevor wir die CSS-Eigenschaften ändern, müssen wir das zu ändernde Element abrufen. Wir können die folgenden Methoden verwenden, um Elemente abzurufen:

1. Elemente nach ID abrufen:

var element = document.getElementById("elementId");

2. Elemente nach Tag-Namen abrufen:

var element = document.getElementsByTagName("elementTagName")[0];

3. Elemente nach Klassennamen abrufen:

var elements = document.getElementsByClassName("elementClassName");

2. CSS-Attribute löschen

Get Nachdem wir das Element erreicht haben, müssen wir JavaScript verwenden, um das CSS-Attribut zu löschen. Es gibt zwei Methoden:

1. Verwenden Sie die Methode „removeProperty“

Die Methode „removeProperty“ kann den Wert des angegebenen Attributs löschen.

element.style.removeProperty("propertyName");

Unter diesen ist propertyName der Name der zu löschenden CSS-Eigenschaft.

Wenn wir beispielsweise das Farbattribut des Elements mit der ID „elementId“ löschen möchten, können wir den folgenden Code verwenden:

var element = document.getElementById("elementId");
element.style.removeProperty("color");

2. Verwenden Sie die direkte Zuweisung an die Methode „“

Wir können auch direkt zuweisen den CSS-Attributwert in eine leere Zeichenfolge „“ umwandeln, um das Attribut zu löschen.

element.style.propertyName = "";

Wenn wir beispielsweise das Farbattribut des Elements mit der ID „elementId“ löschen möchten, können wir den folgenden Code verwenden:

var element = document.getElementById("elementId");
element.style.color = "";

3. Auf bestimmte Szenarien anwenden

Im Folgenden wird ein bestimmtes Szenario zur Demonstration verwendet wie man mit JavaScript CSS-Attribute löscht. Wir haben eine Schaltfläche. Wenn auf die Schaltfläche geklickt wird, muss das Farbattribut des h1-Tags gelöscht werden.

HTML-Code:

<h1 id="title">Hello, World!</h1>
<button id="button">Click</button>

JavaScript-Code:

var button = document.getElementById("button");
var title = document.getElementById("title");

button.addEventListener("click", function() {
  title.style.color = "";
});

Im obigen Code erhalten wir zuerst die Schaltfläche und das h1-Tag. Anschließend haben wir der Schaltfläche einen Klickereignis-Listener hinzugefügt. Wenn auf die Schaltfläche geklickt wird, setzt der Click-Event-Handler das Farbattribut des h1-Tags auf eine leere Zeichenfolge und löscht so das Attribut.

Zusammenfassung

Oben erfahren Sie, wie Sie CSS-Attribute mit JavaScript löschen. Wir können die Methode „removeProperty“ verwenden oder den Eigenschaftswert direkt einer leeren Zeichenfolge zuweisen, um eine Löschung zu erreichen. In bestimmten Anwendungen müssen wir zuerst das zu ändernde Element abrufen und dann den entsprechenden Ereignis-Listener hinzufügen, um den Löschvorgang auszulösen.

Das obige ist der detaillierte Inhalt vonSo löschen Sie CSS-Attribute in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!