Was ist der Grund, warum die JS -Konsolenausgabe leer ist und die Stiländerung ungültig ist? Wie löst ich es?

Fehlerbehebung und Lösung des Fehler

Wenn Sie im JavaScript -Code versuchen, top Attributwert eines Elements zu ändern, ist die Konsolenausgabe leer und die Änderung ungültig, normalerweise aufgrund des falschen Zugriffs auf den Elementstil. Das Problem kann sein, dass Sie element.style.top direkt verwenden, um die im CSS -Stylesheet definierten Stile zu manipulieren. element.style.top wirkt nur auf den Inline -Stil des Elements und kann die Stile nicht ändern, die durch externe Stylesheets oder interne Stylesheets eingestellt werden.

Wenn beispielsweise das top Attribut des Elements .sidebar_right ul durch ein CSS -Stylesheet definiert wird, gibt sidebarright.style.top eine leere Zeichenfolge zurück. Um den Stil korrekt zu ändern, wird empfohlen, die folgenden zwei Methoden zu verwenden:

Methode 1: Verwenden Sie das window.getComputedStyle()

window.getComputedStyle() Wir können es verwenden, um top -Wert des Elements zu erhalten und es dann zu ändern:

 const sidebarright = document.querySelector ('. Sidebar_right ul');
const closeBtn = document.getElementById ('closeBtn'); // Stellen Sie sicher, dass CloseBtn definiert ist CloseBtn.onclick = function () {
  // ... andere Codes ...
  const compcusedStyle = window.getComputedStyle (Sidebarright);
  let topValue = parseInt (computertheStyle.getPropertyValue ('Top'), 10); // Die Zeichenfolge in eine Zahl konvertieren und 10 als Radix angeben lassen.
  SideBarright.Style.top = `$ {newtop} px`;
};

Dieser Code verwendet zuerst getComputedStyle() um den top -Attributwert des sidebarright -Elements zu erhalten, ihn in eine Nummer umzuwandeln, den neuen top -Wert zu berechnen und schließlich style.top -Attribut des Elements zuzuweisen.

Methode 2: Verwenden Sie den CSS -Klassennamen, um den Stil zu steuern

Ein prägnanterer und eleganterer Weg ist es, eine neue Klasse im CSS -Stilblatt wie .moved zu definieren, um den Zustand nach der Bewegung darzustellen:

 .Moved {
  Top: 180px; /* oder einen anderen erforderlichen Wert*///
}

Steuern Sie dann im JavaScript -Code den Stil des Elements, indem Sie den Klassennamen hinzufügen oder entfernen:

 const sidebarright = document.querySelector ('. Sidebar_right ul');
const closeBtn = document.getElementById ('closeBtn'); // Stellen Sie sicher, dass CloseBtn definiert ist CloseBtn.onclick = function () {
  // ... andere Codes ...
  SideBarright.ClassList.add ('bewegt');
};

Diese Methode verwaltet Stile über CSS -Klassennamen und erleichtert die Wartung und Ausweitung.

Wichtiger Tipp: Stellen Sie sicher, dass Variablen wie topAd , locationItem , myJD , closebtn , closeBtn und andere Variablen im Rahmen der onclick -Funktion korrekt definiert und initialisiert werden. Die Benennung von Variablen im Code ist inkonsistent und es wird empfohlen, die Namensgerichtsspezifikation zu vereinen. Verwenden Sie const oder let Variablen deklarieren, um die Lesbarkeit und Wartbarkeit der Code zu verbessern. Verwenden Sie die Vorlage buchstäblich ${} um Zeichenfolgen zu erstellen, um den Code präzise zu gestalten. Fügen Sie einen Fehlerbehandlungsmechanismus hinzu, z. B. überprüft, ob ein Element existiert.

Das obige ist der detaillierte Inhalt vonWas ist der Grund, warum die JS -Konsolenausgabe leer ist und die Stiländerung ungültig ist? Wie löst ich es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!