- 締切済み
JavaScriptでa:activeなどの設定を取得する方法
JavaScriptでaの疑似クラスであるactiveやhoverの色設定を 取得する方法はないでしょうか？ IDでは下記のような感じで設定を読み書きできますが。 これらの疑似クラスはアクセスできないのでしょうか？ 調べてみましたが目的の情報にはたどり着けませんでした。 よろしくお願いいたします。 <span id="hoge" style="color:red">hoge</span> <script type="text/javascript"> <!-- var hogeColor= document.getElementById( "hoge" ).style.color; alert( hogeColor ); //--> </script>
- nakata321
- お礼率59% (13/22)
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
正規表現に関しては var pettern=new RegExp(className,"i"); if( r[i].selectorText.match(pettern) ・・・・ とするれば変数からパターンを作れます。
- arexis
- ベストアンサー率66% (66/99)
質問には直接関係ないですが 正規表現の部分内容にもよりますが a = 'EFGHIJK'; b = 'GHI' alert(a.match('.{1}' + b)); な感じで使えます。 詳しくないので・・・微妙ですがｗ。 indexOfで大文字小文字の区別をなくすなら 引数も対照文字列も toUpperCase()、toLowerCase() で大文字小文字に統一して r[i].selectorText.toUpperCase().indexOf( className.toUpperCase(), 0 ) にすればOKです。
- ai10
- ベストアンサー率27% (3/11)
>>#2 …まったく同じことしているのは気のせいですか…？
- yambejp
- ベストアンサー率51% (3827/7415)
cssで指定しているのでしたらこんな感じでできるのでは？ （ちょっと複雑になると工夫が必要ですが） <html> <head> <style> a:hover{ color:green; } </style> <script> window.onload=function(){ var r=(document.styleSheets[0].cssRules)?document.styleSheets[0].cssRules:document.styleSheets[0].rules; for(var i=0;i<r.length;i++){ if(r[i].selectorText.match(/a:hover/i)){ alert(r[i].style.color); } } } </script> </head> <body> <div id="test"> <a href="#">test</a> </div> </body> </html>
- ai10
- ベストアンサー率27% (3/11)
少々非効率だと思いますが、 スタイルシートを全部調べていく方法で…汗。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang='ja'> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type='text/javascript'> //@cc_on window./*@if (@_jscript) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'load', function () { var sss, ss, rules, rule; var i, I, k, K; var reg = /(?:^|\s)a:active(?:\s|$)/i; // i オプションは必須 var a_active = []; sss = document.styleSheets; for( i=0, I=sss.length; i<I; i++ ) { ss = sss[i]; rules = ss./*@if (@_jscript) rules @else@*/ cssRules /*@end@*/; for( k=0, K=rules.length; k<K; k++ ) { rule = rules[k]; if( reg.test( rule.selectorText ) ) a_active.push( rule ); } } alert( a_active[0].style.color ); // [a:active] の #0000ff が表示される alert( a_active[1].style.color ); // [div a:active] の #ff0000 が表示される // destroy sss = ss = rules = rule = i = I = k = K = reg = null; // a_active = null; }, false ); </script> <style type='text/css'> a:active { color : #0000ff; } div a:active { color : #ff0000; } </style> </head> <body> <div><a href='http://www.google.co.jp/'>html</a></div> </body> </html> ---------------------------------------------------------------- 全角スペース使用。 変数名はかなり適当に作ったのでちょっとわかりにくいと思います…汗 多分、ロード時だろうが、そうでなかろうが動くと思うが 一応ロード時に調べている。 また、a:active が複数使われている場合を想定して配列にしといた。 a_active[0] には1つめ、a_active[1] には2つめ という具合に。 ただし、これはあくまでスタイルシートの設定をひろうだけ。最終的にレンダリングされる際のスタイルとなると話は別。この場合は (IEなら)element.currentStyleらへんを見る必要があると思うが、なにせa:activeだから、単純にはいかないと思います。
お礼
ご回答ありがとうございます。 やはりa:activeを取得する簡単な方法というのはないのですね。 わざわざコードを書いていただいて恐縮なのですが 私のレベルではちょっと難しすぎました。すいません。
お礼
ご回答ありがとうございます。 二行目でスタイルシートの設定を全部拾い（cssRulesになければrules） それをすべてループさせ、正規表現でマッチしたものを拾う という感じでしょうか。 書いていただいたコードを元に改造したら、思い通りの動作になりました。 ありがとうございました。 汎用性を持たせるために、下記のような関数にしてみたりもしましたが JavaScriptの正規表現では変数を扱えない（？）ようなのでindexOfになってしまいました。 (PerlやPHPのようにはいかないんですね) FireFoxでは小文字のaでIEでは大文字だったりするので これは使えないですｗ //指定されたクラス名のオブジェクトを返す function getClassObject( className ) { var result; //スタイルシートの設定をすべてループ for( var i = 0; i < r.length; ++i ) { //指定されたクラス名と一致すれば変数に格納してループを抜ける if( r[i].selectorText.indexOf( className, 0 ) == 0 ) { result = r[i]; break; } } //結果を返す return result; }