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

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>

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

document.styleSheets[0].rules[0].style.display = "inline";

In Firefox:

document.styleSheets[0].cssRules[0].style.display = "inline";

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; 
} 
} 
} 
}

Dann einfach:

getstyle(".orig").display = "inline";

.
------------------ 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>

Regel S ändern: Dokument .styleSheets[0].rules [0].style.display='inline';
Ändern Sie die Regel W: document.styleSheets[0].style.display = 'inline'; HTML muss d5712e9cdb50a3edfce90e40c6f7bebb oder c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 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

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"];

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!