style對象的cssText方法有什么用

發(fā)布時間：2022-03-07 11:08:30 來源：億速云閱讀：136 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)style對象的cssText方法有什么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　cssText本質(zhì)是什么？

　　cssText的本質(zhì)就是設(shè)置HTML元素的style屬性值。

　　cssText怎么用？

　　domElement.style.cssText="color:red;font-size:13px;";

　　cssText返回值是什么？

　　在某些瀏覽器中（比如Chrome），你給他賦什么值，它就返回什么值。在IE中則比較痛苦，它會格式化輸出、會把屬性大寫、會改變屬性順序、會去掉最后一個分號，比如：

　　document.getElementById("d1").style.cssText="color:red;font-size:13px;";2alert(document.getElementById("d1").style.cssText);

　　在IE中值為：FONT-SIZE:13px;COLOR:red

　　cssText的使用優(yōu)勢

　　一般情況下我們用js設(shè)置元素對象的樣式會使用這樣的形式：

　　varelement=document.getElementById(“id”);

　　element.style.width=”20px”;

　　element.style.height=”20px”;

　　element.style.border=”solid1pxred”;

　　樣式一多，代碼就很多；而且通過JS來覆寫對象的樣式是比較典型的一種銷毀原樣式并重建的過程，這種銷毀和重建，都會增加瀏覽器的開銷。

　　js中有一個cssText的方法：

　　domElement.style.cssText=”樣式”;

　　domElement.style.cssText=”width:20px;height:20px;border:solid1pxred;”;

　　這樣就可以盡量避免頁面reflow，提高頁面性能。

　　但是，這樣會有一個問題，會把原有的cssText清掉，比如原來的style中有’display:none;’，那么執(zhí)行完上面的JS后，display就被刪掉了。

　　為了解決這個問題，可以采用cssText累加的方法：

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

　　再進一步，如果前面有樣式表文件寫著div{text-decoration:underline;}，這個會被覆蓋嗎？不會！因為它不是直接作用于HTML元素的style屬性。

　　具體案例分析:

　　<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<htmlxmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

　　<title>控制div屬性</title>

　　<style>

　　#outer{width:500px;margin:0auto;padding:0;text-align:center;}

　　#div1{width:100px;height:100px;background:black;margin:10pxauto;display:block;}

　　</style>

　　varchangeStyle=function(elem,attr,value)

　　{

　　elem.style[attr]=value

　　};

　　window.onload=function()

　　{

　　varoBtn=document.getElementsByTagName("input");

　　varoDiv=document.getElementById("div1");

　　varoAtt=["width","height","background","display","display"];

　　varoVal=["200px","200px","red","none","block"];

　　for(vari=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>

　　<divid="outer">

　　<inputtype="button"value="變寬"/>

　　<inputtype="button"value="變高"/>

　　<inputtype="button"value="變色"/>

　　<inputtype="button"value="隱藏"/>

　　<inputtype="button"value="重置"/>

　　<divid="div1"></div>

　　</div>

　　</body>

　　</html>

關(guān)于“style對象的cssText方法有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

style對象的cssText方法有什么用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽