[暴満館] タグ: cssのエントリ

Home / Diary / タグ: css

Operaで動的にグローバルなスタイルを変更する
JavaScriptでCSSを弄る際のメモ
枠付きグラデで四角い角を丸くする - Nifty++
JavaScriptで枠付き丸角をつける
CSSによる段組を非推奨してみる

Operaで動的にグローバルなスタイルを変更する

OperaはstyleSheetsオブジェクト等、スタイルシートを直接弄れるプロパティが存在しないので、グローバルなスタイルを変更するのは、既存のcssファイルを追加する以外は不可能だった（ハズ）。

そこで、動的に変更したいスタイルをデータスキームに変換してcssファイルとして追加することで、動的にスタイルを変更させてみた。

欠点は現在の値を読み取れないこと。別途適当なオブジェクトを作成して、追加する度にそのオブジェクトにも反映させるなどして、自分で見るしかない。また、追加しまくるとどんどんメモリを食うと思うので、適当なところで一旦削除する必要があると思われる。

Opera9見てると、そのうちdocument.styleSheetsが追加されそうな雰囲気だが、まあそれまでの一時しのぎってことで。

Info

投稿日: 2006年4月18日
タグ: css、opera
このエントリの固定リンク: http://bmky.net/diary/log/1368.html
ブックマークに追加する
コメント: コメントを投稿する

2006
0418

Tagscss opera

⇧

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
このエントリの固定リンク: http://bmky.net/diary/log/1342.html
ブックマークに追加する
コメント: コメントを投稿する

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分の中でやや圧縮気味だがしっかりと紹介している。とても素晴らしい。リンク先ではわざわざ日本語字幕を作成してくれている。非常に感