2008年3月1日土曜日

 

【Javascript】style.css.Text

[javascript] style.cssText の使い処に関する考察

<body style="margin: 1em; padding: 1em; border: 1em">....</body>

<script type="text/javascript">
alert(document.body.style.cssText); // 'margin: 1em; padding: 1em; border: 1em'

document.body.style.cssText = 'width: 100px'; 

alert(document.body.style.width);   // '100px'
</script>

一括で記述できるし、style.xxxx = "~" と書くよりちょっと動作も速いらしい。
クロスブラウザ - Safari 3, Opera 9, Firefox 2, IE 6, IE 7 だそうです。
"style" に続くんだからブラウザ算出値じゃなく、HTMLに直接指定したスタイルだけかな?
以下のスタイル値退避させる使い方は便利。


var style = element.style;
var cache = style.cssText;
//~なんか色々いじって~
style.cssText = cache;

元通り。

自分メモ

次のようなのを書きました。お粗末さまです。


function disable() {
   var item1=document.getElementById('id1').getElementsByTagName('*');//id1 内のHTML要素を全部取得
   var item2=document.getElementById('id2').getElementsByTagName('*');//id2 内のHTML要素を全部取得
   len1=item1.length;//id1 内の要素数取得
   len2=item2.length;//id2 内の要素数取得
   var cache={};//id1、id2 内の要素のスタイルを退避する配列
  if (document.frm.mycheck.checked == true) {//チェックされた時
     for (i = 0;i < len1;i++) {
        cache[i]=item1[i].style.cssText;//元スタイル保存
      item1[i].style.color='#eee';//文字色をグレーにして目立たせない
      item1[i].disabled=true;//選択できなくする
     }
     for (i = 0;i < len2;i++) {//同上
        cache[(len1+i)]=item2[i].style.cssText;
      item2[i].style.color='#eee';
      item2[i].disabled=true;
     }
  } else {//チェックが外れたら
    for (i = 0;i < len1;i++) {
       item1[i].style.cssText=cache[i];//スタイルを元に戻す
       item1[i].disabled=false;//有効にする
    }
    for (i = 0;i < len2;i++) {//同上
       item2[i].style.cssText=cache[len1+i];
       item2[i].disabled=false;
    }
  }
}

ラベル:


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google