Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit JavaScript oder jQuery auf CSS-Klassenstilattribute zugreifen?

Wie kann ich mit JavaScript oder jQuery auf CSS-Klassenstilattribute zugreifen?

Barbara Streisand
Barbara StreisandOriginal
2024-12-09 06:08:14987Durchsuche

How Can I Access CSS Class Style Attributes Using JavaScript or jQuery?

Zugriff auf CSS-Klassenstilattribute mit JavaScript/jQuery

Beim Umgang mit CSS-Animationen kann es schwierig sein, auf die Stilattribute von Elementen zuzugreifen aus einer CSS-Klasse mit JavaScript oder jQuery. Es gibt jedoch effiziente Möglichkeiten, diese Attribute abzurufen.

Stilattribut mithilfe einer benutzerdefinierten Funktion abrufen

Ein Ansatz besteht darin, eine benutzerdefinierte JavaScript-Funktion zu erstellen, die die Stylesheets des Dokuments durchläuft auf der Suche nach dem passenden CSS-Selektor und -Stil. Hier ist eine Beispielfunktion:

function getStyleRuleValue(style, selector, sheet) {
  var sheets = sheet ? [sheet] : document.styleSheets;
  for (var i = 0, l = sheets.length; i < l; i++) {
    var sheet = sheets[i];
    if (!sheet.cssRules) continue;
    for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
      var rule = sheet.cssRules[j];
      if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
        return rule.style[style];
      }
    }
  }
  return null;
}

Um beispielsweise das Farbattribut der .highlight-Klasse abzurufen:

var color = getStyleRuleValue('color', '.highlight');

Hinweis: Diese Funktion geht davon aus, dass die Stylesheets werden inline definiert oder haben dieselbe Domäne wie das aktuelle Dokument.

Anwenden Animation

Mit dem abgerufenen Stilattribut können Sie es auf Ihre Animation anwenden:

$(this).animate({
    color: color // Retrieved color attribute
}, 750);

Durch die Aktualisierung der CSS-Klasse von Rot auf Blau wird die Animation entsprechend angepasst und ausgerichtet mit dem aktualisierten CSS-Farbstil.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript oder jQuery auf CSS-Klassenstilattribute zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn