HoBoFoTo

Hobo everyday foto.

日本語 English

javascriptでaリンクの hover 時の色を取得する方法

javascriptでaリンクの色を取得しようと思っていたのですが、hover時の色を取得するのにとても手間取りました。

WordPressでjavascriptでaリンクの色を取得するためにコードを書いていました。

hoverしていないときの色はjQueryを使って、

var color=$('a').css('color');

で取得てきたのですが、hoverしている時の色を

var color=$('a:hover').css('color');

では取得てきませんでした。
googleやyahooで検索すると、どうもjQueryのcssクラスタには、hover疑似クラスには対応していないとのこと。じゃあどうすればいいのか?検索するもなかなかいいものが見つからず。hoverメゾットというものがあってそれを利用するということがわかりましたが、それでは、本当にhoverしているときにしか色を取得できないことが分かり、断念。

できないのだろうかと半分あきらめかけていた所、見つけました。このサイトで同じ質問をしている人がいて、答えがのっていました。

まず新しい関数を用意します。

function getCssPropertyForRule(rule, prop) {
        var sheets = document.styleSheets;
        var slen = sheets.length;
        for(var i=0; i<slen; i++) {
            var rules = document.styleSheets[i].cssRules;
            var rlen = rules.length;
            for(var j=0; j<rlen; j++) {
                if(rules[j].selectorText == rule) {
                    return rules[j].style[prop];
                }
            }
        }
    }

その上でその関数を次のように呼び出します。

var color = getCssPropertyForRule('a:hover', 'color');

これでやっと取得することができました。
しかし英語のサイトでしか回答がないとは、同じ質問をする人はないんでしょうかね。

共有:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です