「document.style.プロパティ」の形式で取得できるのはインラインスタイルのみ。
外部ＣＳＳで定義されたスタイルは取得できません。
「element.style.プロパティ」についても同様。
どちらも設定はできるが、参照はできません。
そういう時は「document.styleSheets[x].cssRules(IEではrules).item(y)」で取得できます。
まあ、これについては結構有名な話だろうと思います。
大体、プロパティの参照なんてほとんどしないものです。
さて、設定する時の事が本題。
「element.style.プロパティ = 値;」で設定するのが普通です。
この方法は確かに楽ですが、getElementsByClassName()メソッドがHTML5でしか定義されていない以上、（このgetElementsByClassName()メソッドを実装したライブラリもありますが、タグを総当たりするため、物凄く効率とスピードが悪いのです）クロスブラウザを目指すためにはこれは、あまり使えるとは言えません。
第二の方法として「document.styleSheets[x].cssRules.item(y)」で取得したＣＳＳルールに追加する方法。
これは確かに確実なのですが、後でＣＳＳルールを途中で追加した場合、おかしくなります。
次は「document.styleSheets[x].cssRules.item(y).selectorText」で取得したプロパティfor構文でを総当たりで調べる方法ですが、selectorTextプロパティはブラウザで取得する値が違うという、一番クロスブラウザに向かない最悪の仕様があります。
例：div.testClass p{STYLES}のセレクターを取得すると
IE→「DIV.testClass P」
FireFox→「div.testClass p」
とタグ名が大文字、小文字変わってきます。
これはブラウザのＣＳＳ解釈方法の差異に問題があるからなのですが、解消する方法は無いのでしょうか？
一応ネットで調べてみると、キャメライズやデキャメライズとか初心者には分かりにくい自作関数で解決してる所ばかりのようです。
そこで、型にハマるのが嫌いな俺は、自作関数に頼らずに分かりやすくクロスブラウザ向きに取得できないか考えてみました。
考えたのが以下の例。
var styles = document.styleSheets[0].rules;
var styleRule;
styleText = new Array();
for(i=0;i<styles.length;i++){
styleText[i]=styles[i].selectorText;
if(styleText[i].toLowerCase() == "div.testClass p"){
styleRule = styles[i].style.cssText;
}
else{
continue;
}
}
alert(styleRule);
取得したセレクターをtoLowerCase()メソッドで全て小文字に直してしまいます。
関数化するなら、引数も小文字化すれば、確実に取得できます。
結構単純にできました。
ただ、問題は複数のプロパティをセレクターに用いている場合はＩＥでは取得できない事です。
でも、これだけでも十分威力を発揮する事を確かめました。
ちなみにこれは、模試の昼食の時間に飯食いながら考えていた事です。
別にＰＣの前で考え倒したわけじゃないですｗ
[0回]
PR
