Wie verwalte ich CSS-Klasseneigenschaften dynamisch mit JavaScript?

So ändern Sie das CSS einer Klasse mit JavaScript

Bei der Arbeit mit CSS-Klassen kann es zu Situationen kommen, in denen Sie dynamisch verwalten müssen ihre Eigenschaften mithilfe von JavaScript. Diese Frage untersucht die effektivste Möglichkeit, das CSS einer Klasse gezielt zu ändern, anstatt sich mit getElementById auf Element-IDs zu verlassen.

Lösung

Der Zugriff ist zwar möglich Stilregeln zu ändern und Änderungen für bestimmte Klassen mithilfe des styleSheets-Arrays vorzunehmen, ist dies nicht der empfohlene Ansatz. Wie aus der Antwort hervorgeht, besteht eine sauberere und besser wartbare Lösung darin, separate Stilregeln für unterschiedliche Anzeigezwecke zu verwalten.

Anstatt beispielsweise die Anzeige von Elementen mithilfe von JavaScript umzuschalten, können Sie zwei Stilregeln erstellen – eine, die definiert display: none und ein anderes, das display: inline definiert. Wenn Sie ein Element ausblenden möchten, wenden Sie einfach die Stilregel „display-none“ auf die Zielklasse an. Um es wieder sichtbar zu machen, entfernen Sie die Stilregel „display-none“ und wenden Sie die Stilregel „display-inline“ an.

Implementierung

<code class="html"><!-- Create two style rules -->
<style>
  .display-none {
    display: none;
  }

  .display-inline {
    display: inline;
  }
</style></code>

<code class="javascript">// Hide an element
document.getElementById('element-id').classList.add('display-none');

// Make it visible again
document.getElementById('element-id').classList.remove('display-none');
document.getElementById('element-id').classList.add('display-inline');</code>

Dieser Ansatz bietet mehr Flexibilität und Wartbarkeit, da Sie mehrere Stilregeln für unterschiedliche Anzeigezwecke erstellen und mithilfe von JavaScript einfach zwischen ihnen wechseln können.

Das obige ist der detaillierte Inhalt vonWie verwalte ich CSS-Klasseneigenschaften dynamisch mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!