ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript を使用してプログラムで非インライン CSS 値にアクセスし、変更するにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-12-22 22:59:18
オリジナル
801 人が閲覧しました

How Can I Programmatically Access and Change Non-Inline CSS Values Using JavaScript?

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 値の取得と変更の両方が可能になります。次のコードは、このプロセスを示しています:

1

2

3

4

5

6

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート