Heim > Artikel > Web-Frontend > Welche Methoden gibt es zur Verwendung der cssText-Methode des Stilobjekts?
Welche Methoden gibt es zur Verwendung der cssText-Methode des Stilobjekts?
- php中世界最好的语言Original
- 2018-02-22 09:35:432227Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie die CSSText-Methode des Stilobjekts verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung der CSSText-Methode des Stilobjekts? .
Was ist die Essenz von CSSText? Das Wesen von cssText besteht darin, den Stilattributwert von HTML-Elementen festzulegen. Wie verwende ich CSSText?domElement.style.cssText = "color:red; font-size:13px;";Was ist der Rückgabewert von cssText? In einigen Browsern (z. B. Chrome) wird der Wert zurückgegeben, den Sie ihm zuweisen. Im IE ist es schmerzhafter, die Ausgabe zu formatieren, die Attribute groß zu schreiben, die Reihenfolge der Attribute zu ändern und das letzte Semikolon zu entfernen, z. B.:
im IE ist: FONT-SIZE: 13px; COLOR: red
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";2 alert(document.getElementById("d1").style.cssText);Vorteile der Verwendung von cssText Wenn wir js verwenden, um den Stil von Elementobjekten festzulegen, verwenden wir im Allgemeinen diese Form:
Bei mehr Stilen gibt es viel Code; und das Überschreiben des Stils eines Objekts durch JS ist ein typischer Prozess, bei dem der ursprüngliche Stil zerstört und neu erstellt wird.
var element= document.getElementById(“id”); element.style.width=”20px”; element.style.height=”20px”; element.style.border=”solid 1px red”;Es gibt eine CSSText-Methode in js:
Auf diese Weise können Sie versuchen, einen Seitenumfluss zu vermeiden und die Seitenleistung zu verbessern.
domElement.style.cssText=”样式”; domElement.style.cssText=”width:20px;height:20px;border:solid 1px red;”;Es tritt jedoch ein Problem auf: Der ursprüngliche CSS-Text wird beispielsweise gelöscht, wenn im Originalstil „display:none;“ vorhanden ist . .
Um dieses Problem zu lösen, können Sie die cssText-Akkumulationsmethode verwenden:
Gehen Sie weiter, wenn sich davor eine Stylesheet-Datei mit der Aufschrift div {
domElement.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’:underline; } , wird dies überschrieben? Gewohnheit! Weil es nicht direkt auf das Stilattribut des HTML-Elements einwirkt.
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制div属性</title>
<style>
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>
<script>
var changeStyle = function (elem, attr, value)
{
elem.style[attr] = value
};
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"];
for (var i = 0; i < oBtn.length; i++)
{
oBtn[i].index = i;
oBtn[i].onclick = function ()
{
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
changeStyle(oDiv, oAtt[this.index], oVal[this.index])
}
}
};
</script>
</head>
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div>
</body>
</html>Verwandte Lektüre:
Was ist der Unterschied zwischen HTML und XHTML und XML
So blockieren Sie die übergeordnete Seite von Popup-Ebeneneffekt der untergeordneten Seite eines Iframes
Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zur Verwendung der cssText-Methode des Stilobjekts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!