cssText属性を上手に使ってjs_javascriptスキルでスタイルを一括操作する

などの HTML 要素の CSS 属性を設定します。コードをコピーします。 コードは次のとおりです。

var head= document.getElementById("head");
head.style.width = "200px";
head.style.display = "ブロック";

これは冗長すぎて書けません。簡単にするには、

コードをコピー などのツール関数を作成します。 コードは次のとおりです。

function setStyle(obj,css){
for(var atr in css){
obj.style[atr] = css[ atr];
}
}
var head= document.getElementById("head");
setStyle(head,{width:"200px",height:"70px",display:"block) "})

cssText 属性が
Google API で使用されており、すべてのブラウザでテストに合格したことがわかりました。必要なコードは 1 行だけで、これは本当に素晴らしいことです。たとえば、

コードをコピーします コードは次のとおりです。

var head= document.getElementById ("head") ;
head.style.cssText="width:200px;height:70px;display:bolck";

innerHTML と同様に、cssText は高速で、すべてのブラウザーでサポートされています。さらに、スタイルをバッチで操作する場合、cssText のリフローは 1 回だけで済むため、ページ レンダリングのパフォーマンスが向上します。

しかし、cssText には以前のスタイルが上書きされるという欠点もあります。たとえば、

コードをコピーします コードは次のとおりです:

TEST

この div に CSS 属性幅を追加したい

コードをコピー コードは次のとおりです:

div.style.cssText = "width:200px;";

幅は適用されますがこのとき、前の色は上書きされます。したがって、cssText を使用する場合は、元のスタイルを保持するためにオーバーレイを使用する必要があります。

コードをコピー コードは次のとおりです。

function setStyle(el, strCss){
var sty = el.style;
sty.cssText = sty.cssText strCss;


IE9/Firefox/Safari/Chrome/Opera ではこの方法を使用しても問題ありません。 、ただし、IE6/7/8 の cssText 戻り値にセミコロンが欠落しているため、がっかりするでしょう。

したがって、CSSText の戻り値に ";" がない場合は、IE6/7/8 で個別に処理する必要があります。

コードを追加します。 コードは次のとおりです。

function setStyle(el, strCss){

function endsWith(str, suffix) {
var l = str .length - suffix.length ;
return l >= 0 && str.indexOf(suffix, l) == l;
}
var sty = el.style,
cssText = sty. cssText;
if (!endsWith(cssText, ';')){
cssText = ';'>}
sty.cssText = cssText strCss; >

関連:

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

https:/ / /developer.mozilla.org/en/DOM/CSSStyleDeclaration