JavaScript を使用して HTML 要素から計算されたスタイル値を取得する方法

JavaScript を使用して HTML 要素からスタイルにアクセスする

質問:

どうすれば取得できますか? JavaScript を使用して計算された HTML 要素のスタイル値 (特にスタイルが tag?

解決策:

計算されたスタイルの値を取得するには、要素の計算されたスタイルにアクセスする必要があります。ほとんどのブラウザでサポートされている標準 DOM レベル 2 メソッドと、IE 固有の element.currentStyle プロパティを使用する 2 つのアプローチがあります。

標準メソッド (W3C):

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  if (defaultView && defaultView.getComputedStyle) {
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  }
}

ここで、プロパティ名はハイフンで区切られた形式である必要があります (例: "font-size")。値はピクセル単位で返されます。

IE メソッド:

if (el.currentStyle) {
  styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
    return letter.toUpperCase();
  });
  value = el.currentStyle[styleProp];
  if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
    // Convert non-pixel units to pixels
    ...
  }
}

IE はプロパティ名がキャメルケース形式であることを期待し、指定された単位で値を返します。このメソッドには特定の制限があることに注意してください。

使用例:

var element = document.getElementById("box");
var width = getStyle(element, "width");
console.log("Width: " + width);

以上がJavaScript を使用して HTML 要素から計算されたスタイル値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。