JavaScriptで要素のスタイルシートのスタイルを取得します。
-
23-08-2019 - |
質問
私は、要素のスタイルを取得するために、プロのJavaScriptテクニックからジョンResig氏のgetStyle
機能を使用してきた。
function getStyle(elem, name) {
// J/S Pro Techniques p136
if (elem.style[name]) {
return elem.style[name];
} else if (elem.currentStyle) {
return elem.currentStyle[name];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g, "-$1");
name = name.toLowerCase();
s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
} else {
return null;
}
}
何のスタイルが指定されていない場合は、しかし、この方法では、要素のデフォルトのスタイルを返します:
http://johnboxall.github.com/test/getStyle.htmlする
http://img.skitch.com/20081227-8qhxie51py21yxuq7scy32635a.png
要素のスタイルシートだけで指定されたスタイルを取得(とスタイルが定義されていない場合はnullを返す)することは可能ですか?
アップデートます:
なぜ、このような獣が必要なのでしょうか?私は、ユーザーが要素のスタイルを可能にする小さなコンポーネントを構築しています。 text-align
するleft
unstyled要素のデフォルトを使用 - center
、right
、getStyle
- 適用可能なスタイルの一つがcenter
です。これは、それが不可能なユーザーは、それが中心になりたかったか、それがデフォルトのスタイルだからセンタリングされるため、要素がセンタリングされているかどうかを伝えることになります。
解決
それだけで取得することが可能です のスタイルシート指定されたスタイル 要素(およびスタイル場合はnullを返します )定義されていない?
それはあなたが提示ルーチンによって行われているものを効果的です。問題は、ほとんどのシナリオでは、ほとんどのスタイルがあるされ、のないの未定義 - 彼らは継承され、および/または個々のブラウザの内部スタイルシートで定義されています。
あなたは可能性が、努力の全体の多くで、のすべてののの現在のビューにのすべてののスタイルシートの中で、問題のスタイルを定義する規則のを反復処理文書は、問題の要素のためにそれらを評価し、どれが適用されない場合は...とどれも親に適用されていない(または、この特定のスタイルが継承されていない)場合は...それは未定義考えます。これが遅くなること、およびの信じられないのエラーが発生しやすいでしょう。私はそれをしようとしてお勧めしません。
おそらく、あなたは一歩下がって、あなたが今までそのようなことを必要とする理由を尋ねた方が良いんでしょうか?
他のヒント
たぶん、あなたのコンポーネントは、それが制御するスタイルをラップすることができますか?スタイルがコンポーネントを介して設定されている場合、コンポーネントは、ユーザーが何を望んでいるか知っています。