次のようにコードをコピーします。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="サーバー">
<タイトル></タイトル>
<style type="text/css">
。日
{
背景色:白;
}
。夜
{
背景色:黒
}
</スタイル>
<script language="javascript" type="text/javascript">
関数 operStyle() {
var divObj = document.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
if (divObj.className == "日") {
divObj.className = "夜";
btnObj.value = "ライトをつけます";
} それ以外 {
divObj.className = "日";
btnObj.value = "ライトを消して";
}
}
//複数のスタイルで構成される div のスタイル属性をバッチ変更します。
//方法 1:
関数メソッドOne() {
var divObj = document.getElementById("divTest");
divObj.style.backgroundColor = "青";
divObj.style.border = "1px 赤";
divObj.style.width = "300px";
divObj.style.height = "200px";
divObj.style.backgroundPosition = "センター";
}
//方法 2:
関数メソッドTwo() {
var divObj = document.getElementById("divTest");
divObj.style.cssText = "背景色:青; 境界線:赤の実線 1 ピクセル; 幅:300px; 高さ:200px; 背景位置:中心";
}
</script>
</head>
<本文>
<form id="form1" runat="server">
<div id="divコンテンツ">
<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 要素 = document.getElementById("id");
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”単色 1px 赤”;
ただし、上記の方法には欠点があり、スタイルの数が増えるとコードが多くなり、JS を介してオブジェクトのスタイルをオーバーライドすることは、元のスタイルを破棄して再構築する一般的なプロセスになります。ブラウザの負荷が増加します。
jsにはcssTextメソッドがあります。
構文は次のとおりです。 obj.style.cssText("style");
上記のコードを次のように変更できます。
次のようにコードをコピーします。
element.style.cssText=”幅:20px;高さ:20px;border:solid 1px red;”;
この書き込み方法では、ページの複数回のリフローを回避し、ページのパフォーマンスを向上させることができます。