要素の CSS 属性値を正確に取得するために JavaScript を実装するにはどうすればよいですか? DOM 要素の CSS プロパティを扱う場合、CSS プロパティ値がページに定義されているが、取得時には空であるという問題がよく発生します。これは、スタイル シート ファイルやインライン CSS のデフォルトのスタイル情報が確実に反映されないためです。この記事では、指定した要素の CSS 属性値を正確に取得する方法を紹介します。
JavaScript:
ソースコードの例
[www.downcodes.com] <script type="text/javascript">
関数 getStyle(要素, 名前)
{
//この属性が style[] に存在する場合、それは最近設定されたものです (現在のものです)
if (elem.style[名前])
{
elem.style[名前]を返します。
}
// それ以外の場合は、IE メソッドを試してください
else if (elem.currentStyle)
{
elem.currentStyle[名前]を返します。
}
//または W3C メソッド (存在する場合)
else if (document.defaultView && document.defaultView.getComputedStyle)
{
//「textAlign」の代わりに従来の「text-Align」スタイルのルール記述方法を使用します
name = name.replace(/([AZ])/g,"-$1");
名前 = 名前.toLowerCase();
//スタイルオブジェクトを取得し、属性の値を取得します（存在する場合）
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
//それ以外の場合は、別のブラウザを使用しています
}
それ以外
{
null を返します。
}
}
</script>
