Home / Diary / JavaScriptでCSSを弄る際のメモ

JavaScriptでCSSを弄る際のメモ

このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。

俺の探し方が悪いんだろうが、JavaScriptでCSSを弄るリファレンスが中々見当たらなかったので、メモも兼ねて書く。

結構適当に書いてる部分もあるので鵜呑みにしないように。あと、Operaは知らね。

スタイルシートのルールを弄る

div内の全要素をgetElementsByTagNameで拾ってforで回してstyleに・・・ってなことをやるよりも、スタイルシート側から操作できるようになれば楽になる。

function addRule( selector, property ) {
　if( document.styleSheets[0].addRule ) //IE
　　document.styleSheets[0].addRule( selector, "{" + property + "}" );
　else if( document.styleSheets[0].insertRule ) //Mozilla
　　document.styleSheets[0].insertRule( selector + "{" + property + "}", document.styleSheets[0].cssRules.length );
　else
　　return false;
}

addRule及びinsertRuleはルールの先頭に追加していく。ルールは基本的に対象が同じなら後から指定したものが有効になるので、どんどん追加していって構わない。

addRule( "div ul.hoge", "display : none" );

これでdiv以下のhogeクラスが指定されてるリスト要素にdisplay:noneを適用して表示しないようにすることができる。

addRule( "div ul.hoge", "display : block" );

あとから追加したものが有効になるので、こうすれば元に戻る。

スタイルシートのルールを取得する

設定できたなら、取得したい時もある。

function getStyleValue( selector, property ) {
　property = ( property.match( /-/ ) ) ? property.camelize( ) : property;
　var stylesheets = document.styleSheets[0].rules        //IE
　　|| document.styleSheets[0].cssRules;  //Mozilla
　for( var i = 0, len = stylesheets.length; i < len; i++ ) {
　　var css = stylesheets[i];
　　if( css.selectorText.toLowerCase( ) == selector.toLowerCase( ) )
　　　return css.style[ property ];
　}
}

こうすることで、現在適用されているルールの値を直接取得することができる。

IEの場合、直接指定されたもののみ取得できるが、Mozillaの場合は、指定していないものはデフォルトの値が入って返ってくる

getStyleValue( "div.hoge", "background" )

IE : #668
Mozilla : rgb(136, 102, 102) none repeat scroll 0% 0%

MozillaはRGBの値が自動的に変換されるのにも気を付ける。

camelizeはハイフン＋小文字アルファベットを大文字アルファベットに直す関数。deCamelizeはその逆。

String.prototype.camelize = function( ) {
　return this.replace( /-([a-z])/g,
　　function( $0, $1 ) { return $1.toUpperCase( ) } );
}
String.prototype.deCamelize = function( ) {
　return this.replace( /[A-Z]/g,
　　function( $0 ) { return "-" + $0.toLowerCase( ) } );
}

こげな感じに宣言しておく。

どうでもいいが、camelizeの逆の動作はdeCamelizeでいいんだろうか？　英語っつーかそこらへんの命名規則に全然詳しくないからわからん。

スタイルシートを無効にする

document.styleSheets[0].disabled = true

これだけ。インライン指定したものは有効なままなので注意。

要素に適用されているスタイルを取得する

div#hoge { margin-top : 10px }

このようにスタイルシートに記述して、該当要素を取得してstyle.marginTopの値を見ても中身は空である。インラインレベル、つまり今現在適用されているスタイルを取得したい場合は以下のようにする。

function getActiveStyle( element, property, pseudo ) {
　if( element.currentStyle ) {           //IE
　　property = ( property.match( /-/ ) ) ? property.camelize( ) : property;
　　return element.currentStyle[ property.camelize( ) ];
　}
　else if( document.defaultView.getComputedStyle ) { //Mozilla
　　property = ( property.match( /-/ ) == null ) ? property.deCamelize( ) : property;
　　return document.defaultView.getComputedStyle( element, pseudo ).getPropertyValue( property );
　}
　return "";
}

getActiveStyle( $( "hoge" ), "marginTop" );
getActiveStyle( $( "hoge" ), "margin-top" );
getActiveStyle( $( "hoge" ), "margin-top", ":first-line" );

こんな感じで使う。

getComputedStyleについて

getComputedStyleの第二引数は擬似要素・セレクタを取得したいときに使う。:first-lineとか:visitedとか。

IEの場合は擬似要素・セレクタの取得が不可能っぽい。currentStyle周辺を掘ってみてもそれっぽいものは見当たらなかった。

getPropertyValueについて

div { margin : 20px }

と指定してgetPropertyValueからmarginで取得しても空の文字列が返ってくる。どうやら一括指定のプロパティは指定できないようになっているらしい。

margin :
marginTop : 20px
marginRight : 20px
marginBottom : 20px
marginLeft : 20px

この場合だとこのようになってしまっているので、1方向ずつ取得しなければならない。IEのcurrentStyleならmargin指定でも問題なし。

続く

Info

投稿日: 2006年3月14日
タグ: css、javascript
このエントリのURL
このエントリへのリンク（HTMLタグ）
ブックマークに追加する

Navigation

関連のあるエントリ: 2006-01-20 枠付きグラデで四角い角を丸くする - Nifty++; 2006-01-17 JavaScriptで枠付き丸角をつける; 2006-08-24 JavaScriptでCSSを弄る際のメモをまとめた; 2006-06-14 JavaScriptでCSSを弄る際のメモその3 Opera9について; 2006-05-13 JavaScriptでCSSを弄る際のメモその2
新しいエントリ（日付順）: 3月16日の駄文
古いエントリ（日付順）: 振動コントローラ特許訴訟、ソニーが黒星

SBM Comments

nirvash: 便利っぽい。暴走しなければ。
mosshm: ページ最下部でspaceを押すとFast Forwardと同様の動作。
kyu: ！
kusigahama: あとで / http://piro.sakura.ne.jp/xul/_rewindforward.html
trickstar_os: マウスジェスチャの進むでもイケル／検索画面で重宝
miya2000: コレって前から有る早送りの機能だよね。今更感があるんだけど。それをスペースキーに割り振ったのが素晴らしいということかな？

firestorm: にゅん。
brainparasite: 後で見よう
moe2: (http://extendead.web.fc2.com/)から。インベーダーから始まり昨今の弾幕シューまでを30分の中でやや圧縮気味だがしっかりと紹介している。とても素晴らしい。リンク先ではわざわざ日本語字幕を作成してくれている。非常に感

Comment

投稿したコメントは公開されません。サイトオーナーのみが閲覧できます。
返信等を希望する場合は、コメント内に連絡先のメールアドレスかサイトのURLを入力してください。

2006
0314

Tagscss javascript

⇧