ホームページ >ウェブフロントエンド >CSSチュートリアル >表示がマスター スタイルシートで設定されている場合、`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 サイトの他の関連記事を参照してください。