表示がマスター スタイルシートで設定されている場合、`myDiv.style.display` が空の文字列を返すのはなぜですか?

マスター スタイルシートとインライン スタイル: 表示プロパティの動作を理解する

JavaScript を使用して DIV 要素の表示プロパティを取得しようとすると、不一致が発生しますが観察されています。 HTML 要素内でインラインで表示を none に設定すると、myDiv.style.display は期待どおり「none」を返します。ただし、マスター スタイルシート内で表示を none として定義すると、myDiv.style.display.

経由でアクセスすると空の文字列が返されます。この動作は、JavaScript の動作方法に基づいて理解されます。 JavaScript を介して DOM 要素にアクセスする場合、要素の計算されたスタイルは CSS ファイルで定義されているため、直接取得できません。

解決策: getComputedStyle

を利用して取得します。計算されたスタイルを調べてこの不一致に対処するには、getComputedStyle プロパティまたは Internet Explorer の currentStyle を使用する必要があります。このプロパティは、目的のスタイル プロパティの計算値を取得します。

計算されたスタイルを取得するための JavaScript 関数

function getStyle(id, name) {
  var element = document.getElementById(id);
  return element.currentStyle
    ? element.currentStyle[name]
    : window.getComputedStyle
    ? window.getComputedStyle(element, null).getPropertyValue(name)
    : null;
}

使用法

getStyle を使用して表示プロパティを取得します:

var display = getStyle('myDiv', 'display');
alert(display); //will print 'none' or 'block' or 'inline' etc

以上が表示がマスター スタイルシートで設定されている場合、`myDiv.style.display` が空の文字列を返すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。