JS一括操作CSS属性
3308 ワード
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.day
{
background-color:White;
}
.night
{
background-color:Black
}
</style>
<script language="javascript" type="text/javascript">
function operStyle() {
var divObj = document.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
if (divObj.className == "day") {
divObj.className = "night";
btnObj.value = " ";
} else {
divObj.className = "day";
btnObj.value = " ";
}
}
// div ，
// 1：
function methodOne() {
var divObj = document.getElementById("divTest");
divObj.style.backgroundColor = "blue";
divObj.style.border = "solid 1px red";
divObj.style.width = "300px";
divObj.style.height = "200px";
divObj.style.backgroundPosition = "center";
}
// 2：
function methodTwo() {
var divObj = document.getElementById("divTest");
divObj.style.cssText = "background-color:Blue; border:solid 1px red; width:300px; height:200px; background-position:center";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divContent" class="day">
<font color="red"> div ， ！</font>
</div>
<input type="button" value=" " id="btnCommit" onclick="operStyle();" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<h1> divTest ， </h1>
<div id="divTest" >
<font color="red"> divTest </font>
</div>
<input type="button" value=" divTest " onclick="methodTwo()" />
</form>
</body>
</html>jsでcssスタイルを書くには、通常、次の2つの方法があります.
一般的にjsで要素オブジェクトを設定するスタイルでは、var element=documentというコードが使用されます.getElementById(”id”); element.style.width=”20px”; element.style.height=”20px”; element.style.border=”solid 1px red”;
しかし、上の方法には欠点があります.スタイルが多ければ、コードがたくさんあります.また、JSでオブジェクトを上書きするスタイルは、元のスタイルを破棄して再構築する典型的なプロセスであり、このような破棄と再構築は、ブラウザのオーバーヘッドを増加させる.
jsにはcssTextの方法がある:構文は:obj.style.cssText("スタイル");上のコードは次のように変更できます:element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
この書き方は,ページの複数回のreflowをできるだけ回避し,ページ性能を向上させることができる.