JSバッチ操作でのCSSプロパティの詳細分析_javascriptスキル

复制代 代码如下: .day { background-color:White; } .night { background-color:Black } 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 = "背景色:青;境界線: 実線の 1 ピクセルの赤;幅:300ピクセル;高さ:200ピクセル;背景位置:center"; } 我是一个div啊，咿呀咿呀呦！

gt; gt;修正divTestの样式、多属性操作 修正divTestの样式 js を使用して CSS スタイルを記述する場合、通常は次の 2 つの方法を使用します: 一般に、js を使用して要素オブジェクトのスタイルを設定する場合は、次の形式を使用します。 次のようにコードをコピーします。 var element= document.getElementById("id"); element.style.width=”20px”; element.style.height=”20px”; element.style.border=”solid 1px”;

しかし、上記の方法には欠点があり、さらに多くのスタイルがある場合、JS を介してオブジェクトのスタイルをオーバーライドするという一般的なプロセスが発生します。再構築によりブラウザのオーバーヘッドが増加します。

js には cssText メソッドがあります: 構文は次のとおりです: obj.style.cssText("style"); 上記のコードを変更できます。 次のようにコードをコピーします: element.style.cssText="width:20px;height:20px;border:solid 1px red;"; この書き方により、ページの複数回のリフローを回避し、ページのパフォーマンスを向上させることができます。