JavaScriptでa:activeなどの設定を取得する方法

締切済

質問者：nakata321
質問日時：2008/02/21 19:26
回答数：5件

JavaScriptでaの疑似クラスであるactiveやhoverの色設定を
取得する方法はないでしょうか？

IDでは下記のような感じで設定を読み書きできますが。
これらの疑似クラスはアクセスできないのでしょうか？
調べてみましたが目的の情報にはたどり着けませんでした。
よろしくお願いいたします。

<span id="hoge" style="color:red">hoge</span>
<script type="text/javascript">

</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.1

回答者： ai10
回答日時：2008/02/21 23:53

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

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

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

No.2

回答者： yambejp
回答日時：2008/02/22 01:04

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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
二行目でスタイルシートの設定を全部拾い（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;
}

通報する

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

No.3

回答者： ai10
回答日時：2008/02/22 01:16

>>#2

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

- 0
- 件

通報する

No.4

回答者： arexis
回答日時：2008/02/23 02:51

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

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

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

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

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