出産前後の痔にはご注意!

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>

このQ&Aに関連する最新のQ&A

A 回答 (5件)

正規表現に関しては



var pettern=new RegExp(className,"i");
if( r[i].selectorText.match(pettern) ・・・・
とするれば変数からパターンを作れます。
    • good
    • 0

質問には直接関係ないですが



正規表現の部分内容にもよりますが
a = 'EFGHIJK';
b = 'GHI'
alert(a.match('.{1}' + b));

な感じで使えます。
詳しくないので・・・微妙ですがw。



indexOfで大文字小文字の区別をなくすなら
引数も対照文字列も toUpperCase()、toLowerCase() で大文字小文字に統一して

r[i].selectorText.toUpperCase().indexOf( className.toUpperCase(), 0 )
にすればOKです。
    • good
    • 0

>>#2


…まったく同じことしているのは気のせいですか…?
    • good
    • 0

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>
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
二行目でスタイルシートの設定を全部拾い(cssRulesになければrules)
それをすべてループさせ、正規表現でマッチしたものを拾う
という感じでしょうか。
書いていただいたコードを元に改造したら、思い通りの動作になりました。
ありがとうございました。

汎用性を持たせるために、下記のような関数にしてみたりもしましたが
JavaScriptの正規表現では変数を扱えない(?)ようなのでindexOfになってしまいました。
(PerlやPHPのようにはいかないんですね)
FireFoxでは小文字のaでIEでは大文字だったりするので
これは使えないですw

//指定されたクラス名のオブジェクトを返す
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;
}

お礼日時:2008/02/22 23:38

少々非効率だと思いますが、


スタイルシートを全部調べていく方法で…汗。
----------------------------------------------------------------
<!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だから、単純にはいかないと思います。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
やはりa:activeを取得する簡単な方法というのはないのですね。
わざわざコードを書いていただいて恐縮なのですが
私のレベルではちょっと難しすぎました。すいません。

お礼日時:2008/02/22 23:30

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング