Welche Methoden gibt es zur Verwendung der cssText-Methode des Stilobjekts?-HTML-Tutorial-php.cn

Welche Methoden gibt es zur Verwendung der cssText-Methode des Stilobjekts?

php中世界最好的语言

Freigeben： 2018-02-22 09:35:43

Original

2196 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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 {

text- befindet. Dekoration

　domElement.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’

Nach dem Login kopieren

:underline; } , wird dies überschrieben? Gewohnheit! Weil es nicht direkt auf das Stilattribut des HTML-Elements einwirkt.

Spezifische Fallanalyse:

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>

Nach dem Login kopieren

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!