マスター スタイルシートに設定すると、「myDiv.style.display」が空の文字列を返すのはなぜですか?

表示スタイルに対するマスター スタイルシートの影響

HTML の表示スタイルを使用してコンテンツを表示する場合、インライン スタイルシートとマスター スタイルシートがその動作にどのような影響を与えるかを理解することが重要です。この記事では、インラインで設定した場合とは異なり、マスター スタイルシートで設定した場合に myDiv.style.display が空の文字列を返す問題について説明します。

表示の初期状態

HTML要素は通常、デフォルトの表示値 (通常は「インライン」) で始まります。これをオーバーライドするために、開発者はインライン スタイルをよく使用します:

<div>

ただし、保守性を高めるために、これらの初期スタイルをマスター スタイルシートに設定すると有益です。

予期しない動作

マスター スタイルシートで display:none を設定すると、要素の初期状態は非表示のままになります。ただし、JavaScript を使用して myDiv.style.display にアクセスすると、最初は空の文字列が返されます。これは、「none」を返すインライン スタイルとは異なります。

getComputedStyle を使用した解決済みの問題

この問題の解決策は、要素の CSS プロパティに直接アクセスすることを理解することです。 (例: element.style.display) インライン スタイル設定を取得します。外部スタイルシートまたはブラウザのデフォルトで定義されたスタイルにアクセスするには、開発者は getComputedStyle メソッドを使用する必要があります。

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

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

getComputedStyle を利用することで、開発者はマスター スタイルシート内の値を含め、外部で設定された値を正確に取得できます。

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