• 締切済み

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>

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.5

正規表現に関しては var pettern=new RegExp(className,"i"); if( r[i].selectorText.match(pettern) ・・・・ とするれば変数からパターンを作れます。

  • arexis
  • ベストアンサー率66% (66/99)
回答No.4

質問には直接関係ないですが 正規表現の部分内容にもよりますが 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)
回答No.3

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

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

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>

nakata321
質問者

お礼

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

  • ai10
  • ベストアンサー率27% (3/11)
回答No.1

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

nakata321
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • クラスのcolor　「#ff0000;」を表示

    ＣＳＳのクラスsampleのcolor　「#ff0000;」を表示する方法を教えてください。 // cssの部分 .sample　｛ 　　　color: #ff0000; ｝ // html内　ＪａｖaScriptの部分 <script type="text/javascript"> function () { var element = document.getElementById("sample"); var samplecolor = element.style.color; } </script> <span id="samplecolor"></span> //----------結果------------------- #ff0000;

  • リンク色を動的に変更したい。innerHTMLでcssを書き換えましたがうまくいきません。

    innerHTMLでcssのコードを直接書き換えたいのですがうまくいきません。 Firefoxでは反映されるのですが、IEでは書き換えられません。 欲しい結果としては疑似クラスを変更してリンク色を変えたいです。 DOMで疑似クラスを変更できればいいのですが、やりかたがわかりません。 リンク色を変更できる方法だれか教えてください。 宜しくお願いします。 <html> <head> <title>Css</title> <script language="javascript"> <!-- function CssRewrite() { $cssString1 = '<style type="text/css">'; $cssString1 += '<!--'; $cssString1 += '.test a:link {color: '; $cssString1 += '#AAAAAA;}'; $cssString1 += '.test a:visited {color: '; $cssString1 += '#AAAAAA;}'; $cssString1 += '// -->'; $cssString1 += '</style>'; alert($cssString1); document.getElementById("css0").innerHTML = $cssString1; } window.onload = CssRewrite; // --> </script> </head> <body> <span id="css0"></span> <span class="test"><a href="#">css</a></span> </body> </html>

  • JavaScriptについて

    <div id="hoge" style="border:1px solid;"></div> <script type="text/javascript"> //ウィンドウサイズの取得 getWindowSize(); // リサイズイベントの設定 window.onresize = getWindowSize; //ウィンドウサイズを取得する function getWindowSize() { ZZZ = window.innerWidth; AAA = ZZZ * 0.98; BBB = (ZZZ * 0.98) * 0.5625; document.getElementById("hoge").style.width = AAA + "px"; document.getElementById("hoge").style.height = BBB + "px"; } </script> 上記のようにブラウザのサイズが変更されたら<DIV>のサイズも変更するようなスクリプトですが、 別のJavaScriptで<div id="hoge" >の中に埋め込み型のプレイヤーを表示しています。 この時にブラウザのサイズを変更してもプレイヤーのサイズが変更されません。 ブラウザのサイズを変更　→　更新ボタンを押すとプレイヤーのサイズも変更されます。 例えば、リサイズされたら最初から読み直す（更新ボタンと同じ動作）にする場合はどうしたら良いでしょうか？

  • javascriptで困っています

    javascriptで、スマホでタッチしたところに四角を描いて、それをtouchmoveイベントで取得した位置に動かし、ドラッグして、はなしたところでその四角を消すというのを作 ろうとしています。思っているように上手く動かないのですが、どのように修正すればいいのでしょうか？少し動いた所で止まってしまい、touchmoveイベントの位置の値を取得 できてないように思います。四角なしで試すとtouchmoveイベントの位置の値を 取得できます 教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <title>test</title> <style type="text/css"> #panel_board{ width:320px; height:384px; position:relative; } #move_panel{ width:64px; height:64px; position:absolute; background-color:#0F9; z-index:10; } </style> <script type="text/javascript" charset="utf-8"> <!-- function init() { var panel_board = document.getElementById("panel_board"); panel_board.addEventListener("touchstart", function(e){ //クリックしたの場所のマス目 var x = e.touches[0].pageX; var y = e.touches[0].pageY; // 新規に要素div（タグ）を生成 var ele = document.createElement("div"); //idをつける ele.id = "move_panel"; //生成した要素の位置を決める ele.style.left=x+"px"; ele.style.top=y+"px"; // panel_boardに生成した要素を追加 panel_board.appendChild(ele); }, false); panel_board.addEventListener("touchmove", function(e){ //動いた位置を取得 var xx = e.touches[0].pageX; var yy = e.touches[0].pageY; //move_panelを動かす document.getElementById("move_panel").style.left = xx+'px'; document.getElementById("move_panel").style.top = yy+'px'; //位置を表示 document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = xx; document.getElementById("txt2").innerHTML = yy; }, false); panel_board.addEventListener("touchend", function(e){ //要素を消す var mp = document.getElementById("move_panel"); mp.parentNode.removeChild(mp); }, false); } // --> </script> </head> <body onLoad="init();"> <div id="panel_board"> </div> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </body> </html>

  • javascriptについての質問です

    先ほどと同じ質問ですが黒、ディムグレイ、灰、黒灰、銀、ライト灰、白の順でひだり側から文字でなくて色だけを間隔なしで表示させたいのですがなかなかうまくいきませんどなたかお教えください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>文字の色を変える、</title> </head> <body bgcolor="#ffffff"> <script language="JavaScript" type="text/javascript"> <!-- //#RRGGBB形式による色の設定 var myStr; <span style="border:thin solid red" ><span style="color:white;background-color:#000000">Black</span ><span style="color:white;background-color:#696969">Dimm gray</span ><span style="color:white;background-color:#808080">Gray</span ><span style="color:black;background-color:#A9A9A9">Dirk gray</span ><span style="color:black;background-color:#C0C0C0">Silver</span ><span style="color:black;background-color:#D3D3D3">Light gray</span ><span style="color:black;background-color:#FFFFFF">White</span ></span> document.write //--> </script> </body> </html>

  • javascriptでスタイルを動的に作成する方法

    javascriptで動的に新たにクラスを作成してスタイルを設定する方法を教えてください。 たとえば、 <html> <head> <style> .hoge { color: red; } </style> </head> <body></body></html> の<style>～</style>をjavascriptで記述するにはどう書けばよいでしょうか？ もちろん、 document.write('<style> .hoge {color: red;}</style>'); では、<style>タグを埋め込むのと同じですので、純粋なjsのcodingをご教示ください。(prototype.jsなどのライブラリを使わない方法) よろしくお願いします。

  • 色をラジオボタンで選択

    エレメントでボタンを押すと色を変えるJavaScriptです。 検索をしながら　ボタンで一度変えることはできるようになりましたが <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <button onclick="effect()">チェンジ</button> <span id="sample">■□□■</span> ラジオボタンで選択するようにしたいのですが どのようにすればよいでしょうか？ うまくいく方法を教えてください。 ブラウザーはGoogle Chrome最新版です。 どうしてもできなければ　Firefoxでもかまいません。 <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <input type=radio name="colorcode" value="#000000" checked>黒 <input type=radio name="colorcode" value="#ff0000">赤 <input type=radio name="colorcode" value="#00ff00">緑 <span id="sample">■□□■</span>

  • javascriptの勉強中です

    javascriptについて勉強中で、switch文とif文を組み合わせようと考えています。 やりたいことは、数値を入力してもらい、入力した文字をnumberに表示します。 また、nyuryokuにキャンセルや入力されていないことを通知します。 ここまではできたのですが、入力の確認画面でキャンセルした場合「もう一度入力してください」とアラートと記述を行いたいのですが、trueが返っているのか数値が記載され、「ありがとうございます」の記述が行われます。 この場合はどうすれば入力確認のアラートを出すことができるのでしょうか。 下記をご確認ください。 <script> function putin() { var num = prompt('数値入力'); switch (num) { case '': document.getElementById('nyuryoku').innerText =('入力してください。'); alert ('入力してください'); str = ('入力してください'); break; case null: document.getElementById('nyuryoku').innerText =('キャンセルされました'); str = ('キャンセルされました'); break; default: confirm('入力内容はこちらでよろしいですか？'); if (true) { document.getElementById('number').innerText = num; document.getElementById('nyuryoku').innerText =('ありがとうございます'); } else { alert('入力内容を確認しもう一度入力してください'); document.getElementById('nyuryoku').innerText('入力内容を確認しもう一度入力してください'); } } } </script> <a onclick="putin()">数値はここで入力が必要</a> <br> <span id="number">ここに数値</span> <br> <span id="nyuryoku"></span> ヒントでもよいので、何卒よろしくお願いします。

  • javascriptでpostした値が取得できない

    ｊavascriptのsubmit()を使ってpostした値が取得できません プログラム自体が素人に近い自分なのですが助けていただきたいです。。。 ページ内にある複数のボタンを５つ押した場合に違うページに押下したid配列と共に送りたいと考えました。 onoffの部分で5回ボタンが押されたら特定のページに遷移するところまではできたのですが、 遷移先でphpのvar_dump($_POST)で確認したところ array(0) { } が返ってきました。送信する前にデータが入ってるかalertで確認したのですが、そのときはちゃんと入っておりました。 取得方法が悪いのかはたまた送信方法が悪いのか混乱してしまい、今回質問させていただきました。 わかる方いらっしゃいましたらご教授よろしくお願いいたします。 member = new Array(); function cardonoff(id){ // ボタン押されてなければ if(document.getElementById("member"+id).value != "登録完了"){ document.getElementById("member"+id).value = "登録完了"; document.getElementById("member"+id).style.background = "#FF0000"; document.getElementById("member"+id).style.color = "#FFFFFF"; // ID追加 member.push(id); alert(member.length + "人のIDは" + member); if(member.length == 5){ alert("5人選択されました"); // 文字列に置き換え var memberlist = member.join(','); document.getElementById('memberid').value = memberlist; document.getElementById('memberselect').submit(); } } } form部分 <form id="memberselect" action="./" method="POST"> <INPUT type="hidden" id="memberid" value="" /> <?php foreach($result as $data){ ?> <section> <div class="category"> <h2> <input type="button" id="member<?php echo $data["id"]; ?>" value="メンバー登録" style="width:150px; height:30px" onClick="cardonoff(<?php echo $data["id"]; ?>)"> </h2> </div> </section> <?php } ?> </form>

  • JavaScriptで時間指定をして表示を切り替え

    JavaScriptで時間指定をして表示を切り替えたいのですが safariだけうまく動作しません、下記のjsファイルを読み込んでHTML側には <div id="hoge1">切り替え前の内容</div> <div id="hoge2">切り替え後の内容</div> としています。 解決策があればご教授お願い致します。 window.onload = changeDisplay; function changeDisplay(){ var objDate = new Date(); var now = objDate.getTime();//現在のタイムスタンプ（ミリ秒）を取得 var changeTime = new Date("Jan 1, 2011 00:00:00");//切り替える日時のタイムスタンプ（ミリ秒）を取得 //切り替え前 if (now < changeTime) { document.getElementById('hoge1').style.display = "block"; document.getElementById('hoge2').style.display = "none"; setTimeout("changeDisplay()", 1000);//1秒ごとに実行（◯秒ごとの場合は、第2引数に 「◯ * 1000」 と記述） //切り替え後 } else { document.getElementById('hoge1').style.display = "none"; document.getElementById('hoge2').style.display = "block"; } }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する