[解決済み] javascriptでHTML要素のスタイル値を取得するには？

質問

styleタグでスタイルを設定した要素から、そのスタイルを取得する方法を探しています。

<style> 
#box {width: 100px;}
</style>

本文では

<div id="box"></div>

ライブラリを使用しない、ストレートなjavascriptを探しています。

下記を試しましたが、空白が続きます。

alert (document.getElementById("box").style.width);  
alert (document.getElementById("box").style.getPropertyValue("width"));

javascriptでスタイルを設定した場合のみ、上記が使用でき、スタイルタグではできないことに気づきました。

どうすれば解決しますか？

この element.style として定義された CSS プロパティのみを知ることができます。 インライン として定義された CSS プロパティのみを知ることができます（プログラム的に、または要素の style 属性で定義された）。 計算されたスタイル .

クロスブラウザでこれを行うのはそれほど簡単ではなく、IE は独自の方法で element.currentStyle プロパティ、そして DOM Level 2 の 標準 の方法は、他のブラウザで実装されている document.defaultView.getComputedStyle メソッドを使用します。

この2つの方法には違いがあり、例えば、IEの element.currentStyle プロパティでは、2つ以上の単語で構成される CCS プロパティ名にアクセスすることを期待し キャメルケース (例 maxHeight , fontSize , backgroundColor など）、標準的な方法では、単語をダッシュで区切ったプロパティを期待します（例えば max-height , font-size , background-color など）。

また、IEの element.currentStyle は、指定された単位ですべてのサイズを返しますが（例：12pt, 50%, 5em）、標準の方法では常にピクセル単位で実際のサイズを計算します。

私は少し前に、計算されたスタイルをクロスブラウザの方法で取得できるようにするクロスブラウザ関数を作りました。

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

上記の関数は場合によっては完全ではありません。例えば色については、標準的な方法では色を rgb(...) という記法で色を返しますが、IEでは定義されたとおりに色を返します。

私は現在このテーマで記事を書いているので、私がこの関数に加えた変更を追うことができます。 ここで .