Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung aller Stilcodebeispiele für Javascript zur Steuerung des CSS-Stils

伊谢尔伦
Freigeben: 2017-07-19 16:43:04
Original
1650 Leute haben es durchsucht

Zeichnen Sie die Methoden auf, die JS zur Steuerung von CSS verwendet.

Verwenden Sie Javascript, um die Attribute einer CSS-Klasse zu ändern...

<style type="text/css"> 
.orig { 
display: none; 
} 
</style>
Nach dem Login kopieren

Ich möchte sein Anzeigeattribut von „Keine“ in „Inline“ ändern.
Lösung: Im IE:

document.styleSheets[0].rules[0].style.display = "inline";
Nach dem Login kopieren

In Firefox:

document.styleSheets[0].cssRules[0].style.display = "inline";
Nach dem Login kopieren

Diskussion: Sie können eine Funktion erstellen, um nach Stilen mit bestimmten Objektnamen zu suchen :

function getstyle(sname) { 
for (var i=0;i<document.styleSheets.length;i++) { 
var rules; 
if (document.styleSheets[i].cssRules) { 
rules = document.styleSheets[i].cssRules; 
} else { 
rules = document.styleSheets[i].rules; 
} 
for (var j=0;j<rules.length;j++) { 
if (rules[j].selectorText == sname) { 
//selectorText 属性的作用是对一个选择的地址进行替换.意思应该是获取RULES[J]的CLASSNAME.有说错的地方欢迎指正 
return rules[j].style; 
} 
} 
} 
}
Nach dem Login kopieren

Dann einfach:

getstyle(".orig").display = "inline";
Nach dem Login kopieren

.
------------------ Beachten Sie, dass document.styleSheets[0].rules[0].style Der Index dieses styleSheets[0]-Arrays die Seitenzahl N darstellt CSS-Stylesheets, der Array-Index seiner untergeordneten Regeln[0] stellt den N-ten Stil in diesem Stylesheet dar, zum Beispiel:

<style type="text/css"> 
.s{display="none";} 
.w{display="none";} 
</style>
Nach dem Login kopieren

Regel S ändern: Dokument .styleSheets[0].rules [0].style.display='inline';
Ändern Sie die Regel W: document.styleSheets[0].style.display = 'inline'; HTML muss oder sein. Die obige Methode ist möglich, z. B. @IMPORT Nr.

Das Folgende ist eine Aufzeichnung des JS-Zugriffs auf Stile in CSS:
Verwendung von Javascript zum Abrufen und Festlegen von Stilen
Der DOM-Standard führt das Konzept des Überschreibens von Stylesheets ein, wenn wir document.getElementById verwenden. "id").style.backgroundColor Beim Abrufen des Stils erhalten Sie nur die im Stilattribut in der ID festgelegte Hintergrundfarbe. Wenn die Hintergrundfarbe nicht im Stilattribut in der ID festgelegt ist, wird eine leere Farbe zurückgegeben Das heißt, wenn die ID verwendet wird class Das Attribut verweist auf ein externes Stylesheet und die Hintergrundfarbe wird in diesem externen Stylesheet festgelegt. Leider ist document.getElementById("id").style.backgroundColor nicht einfach zu verwenden. Wenn Sie die Einstellungen im externen Stylesheet abrufen möchten, müssen Sie die Methode getComputedStyle() des Fensterobjekts verwenden. Der Code ist so geschrieben

window.getComputedStyle(id,null).backgroundColor
Nach dem Login kopieren
Aber das Kompatibilitätsproblem tritt erneut auf funktioniert gut in Firefox, aber nicht im IE

Beide Die orer-kompatible Methode wird geschrieben als

window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];
Nach dem Login kopieren
Wenn es darum geht, die Hintergrundfarbe zu erhalten, ist der Rückgabewert von Diese Methode in Firefox und IE ist immer noch unterschiedlich. In Firefox gibt sie „#ffff99“ zurück.

Es ist erwähnenswert, dass window.getComputedStyle(id,null) dies nicht kann Legen Sie den Stil fest. Um ihn festzulegen, müssen Sie die ID wie folgt schreiben:
CURRENTSTYLE kann den Stil nur im schreibgeschützten Modus abrufen >




Das obige ist der detaillierte Inhalt vonZusammenfassung aller Stilcodebeispiele für Javascript zur Steuerung des CSS-Stils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage