JavaScript を使用してプログラムで非インライン CSS 値にアクセスし、変更するにはどうすればよいですか?

JavaScript を使用した CSS 値の変更

非インライン CSS 値へのアクセス

JavaScript では、インライン CSS 値は、次を使用して簡単に変更できます。 document.getElementById('id').style.width = 値。ただし、スタイルシートで定義されている非インライン CSS 値を扱う場合、この方法には問題があります。 JavaScript を使用してこのような値を取得すると Null が返されるため、特定の論理操作の実行が困難になります。

プログラムによるスタイル プロパティの変更

この問題に対処するには、CSS スタイルシートにアクセスして、プログラム的に変更されました。方法は次のとおりです。

1. document.styleSheets を使用してスタイルシートの配列を取得します。
2. document.styleSheets[styleIndex].href プロパティを予想されるパスと比較して、特定のスタイルシートを見つけます。
3. document.styleSheets[styleIndex].rules を使用して CSS ルールの配列を取得します。 IE または他のブラウザの document.styleSheets[styleIndex].cssRules。
4. selectorText プロパティを既知のセレクター (#tId など) と比較して、目的のルールを特定します。

1 回ルールが識別されると、その value プロパティを読み取って設定できます。これにより、インライン スタイルを変更せずに CSS 値の取得と変更の両方が可能になります。次のコードは、このプロセスを示しています:

var styleIndex = 0; // Index of the stylesheet to modify
var ruleIndex = 1; // Index of the rule to modify
var cssRuleCode = document.all ? 'rules' : 'cssRules'; // Account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; // e.g., '#tId'
var value = rule.value; // Get the current value or set a new value using `rule.value = 'new_value'`

以上がJavaScript を使用してプログラムで非インライン CSS 値にアクセスし、変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。