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

tsukkee: JavascriptからCSSを弄るための関数をいくつか
webmarksjp: javascript
owaranai_dobby: JSからCSSをいじる時（特にClass)
toby_net: スタイルシートをJavaScriptでいじる
hisasann: addRule、insertRule
toby
mackato: getElementsByTagNameで拾ってforで回してstyleに・・・ってなことをやるよりも、スタイルシート側から操作できるようになれば楽になる
fmreal: 俺の探し方が悪いんだろうが、JavaScriptでCSSを弄るリファレンスが中々見当たらなかったので、メモも兼ねて書く。結構適当に書いてる部分もあるので鵜呑みにしないように。あと、Operaは
shokai: JavaScriptでCSSにaddRule insertRule など
wozozo: スタイルの追加・取得・無効化などの方法。
lesamoureuses: CSSから取得して、CSSを変更
yuki_2021: なるほど
hakobe: そのうちjavascriptっ子になったらよもう
sakishuh: スタイルをjsで弄る
ono_matope: 丁度今必要だった！
masui: JavaScriptでスタイルシートを操作する
zetamatta: <div>とか<span>の class を変更するのではなく、「CSSを」追加・参照するやり方
mhrs: 「まとめ」が http://bmky.net/text/note/javascript-css.html にある。
koyhoge: document.styleSheets を js でほげる。
sousk: DOM2 CSS, よくまとまっている
ll_koba_ll: JavaScriptでCSSを弄る際のメモ
hakobe932
nilab: 暴満館＞＞ JavaScriptでCSSを弄る際のメモ
yuki_neko_nyan: をいじるメモ
shokai
zyun1109: JavaScriptでCSSを弄るつもりなら、全称セレクタは使うな。グループ化は避けろ。
vine_hate: [javascript]
wakaspec: [CSS]
hiro_y: JavaScriptでスタイルシートを操作。
fukken: JavaScriptからCSSをいじる＆スタイルを取得する。//addRule/insertRuleなんてあるのか、直でCSSいじってた…
saladdays: JSでCSSを制御。Ajax時代の今、アツい…かも。
kkobayashi: う、document.styleSheets なんてあるのか。その辺まじめに勉強したいな
brazil: CSS、操作、クロスブラウザ、addRule/cssRules、わかりやすい
ka2u: getComputedStyleってインラインでないときにつかうんじゃなかったけ。おれの勘違いかな