Heim  >  Artikel  >  Web-Frontend  >  So erhalten Sie CSS-Eigenschaften in JS

So erhalten Sie CSS-Eigenschaften in JS

coldplay.xixi
coldplay.xixiOriginal
2020-11-09 14:49:471750Durchsuche

So erhalten Sie CSS-Attribute in js: Verwenden Sie die Methode [getComputedStyle(div)], um sie abzurufen. Der Code lautet [var a = document.defaultView.getComputedStyle(div);].

So erhalten Sie CSS-Eigenschaften in JS

【Empfohlene verwandte Artikel: vue.js

So erhalten Sie CSS-Attribute in js:

Wenn Sie natives js für die Entwicklung verwenden, müssen Sie sollte begegnen, die ich brauche um CSS-Eigenschaften abzurufen, und dann stelle ich fest, dass es scheinbar nicht möglich ist, sie direkt abzurufen. Hier sind zwei Möglichkeiten, CSS-Attribute in nativem JS abzurufen. Die direkte Erfassung schlägt beispielsweise fehl. Verwenden Sie die getComputedStyle(div)-Methode Mit dem Rechner berechnet, erhalten Sie das folgende Ergebnis, wenn Sie den Hintergrund abrufen:

window.onload = function() {
var but = document.getElementById('button');
var div = document.getElementById('getStyle');
but.onclick = function() {
alert(div.style.width);//弹出空的对话框
}
}

Bitte geben Sie also deutlich an, welchen Stil Sie erhalten möchten, etwa so:

window.onload = function() {
var but = document.getElementById('button');
var div = document.getElementById('getStyle');
but.onclick = function() {
var a = document.defaultView.getComputedStyle(div);
alert(a.width);//100px
}
}

2. Lassen Sie beim Schreiben des Namens keine Leerzeichen 'div' nein Es kann 'div' sein

3. Erhalten Sie keine nicht festgelegten Stile, inkompatibel

Lösung für die Kompatibilität: IE8 und niedrigere Versionen können die getComputedStyle-Methode nicht verwenden, sondern die currenrStyle-Methode verwenden

alert(a.background);//reb(255,0,0) none repeat sroll 0% 0% / auto padding-box border-box

Verwandtes kostenloses Lernen Empfehlungen:

Javascript

(Video)

Das obige ist der detaillierte Inhalt vonSo erhalten Sie CSS-Eigenschaften in JS. 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