ネイティブJSでCSSを変更する方法-CSSチュートリアル-php.cn

ネイティブJSでCSSを変更する方法

醉折花枝作酒筹

リリース： 2023-01-07 11:45:18

オリジナル

3521 人が閲覧しました

メソッドは次のとおりです: 1.node.style.cssText="css 式 1; css 式 2; css 式 3" を介して; 2. 最初に CSS スタイルシート Style で特定のクラスを設定し、次にアタッチします。クラスのスタイル設定を、node.classname="クラス名" を通じてノードノードに設定します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

以下では、ネイティブ JS で CSS スタイルを変更する 2 つの方法を紹介します。

1JavaScript コード #node の ## を使用します。 .style.cssText="css 式 1; css 式 2; css 式 3 " は CSS スタイルを直接変更します。

2まず、CSSスタイルシートの「アクティブクラス」などの特定のクラスのスタイルを設定します（ここでのアクティブクラスは想定されており、現時点では存在しません）。次に、JavaScript コードで node.classname="active" を介して、CSS スタイルシート内のアクティブクラスのスタイル設定がノードノードにアタッチされます。

以下は詳細な紹介です。最初は HTML コードです:

<style type="text/css">
           div {
			float: left;
			padding: 20px;
			margin: 10px;
			border: 1px solid #000;
			background-color: #fff;
			color: #000;
		}
           .active
                {
                       background-color:blue
                }
</style>
<body>
      <div class="root">
      </div>
</body>

ログイン後にコピー

まず、上記の最初の方法を使用して CSS スタイルを変更し、次の JavaScript コードを記述します:

<script type="text/javascript">  
          var root=document.getElementsByClassName("root")[0];
       root.style.cssText="background-color: blue;color: #fff;";
 </script>

ログイン後にコピー

実行結果は次のとおりです:

ネイティブJSでCSSを変更する方法

次に、上記の 2 番目の方法を使用して CSS スタイルを変更し、次の JavaScript コードを記述します:

<script type="text/javascript">  
       var root=document.getElementsByClassName("root")[0];
           root.className="active";</script>

ログイン後にコピー

同じ操作の結果は次のとおりです:

ネイティブJSでCSSを変更する方法

要約: これら 2 つのメソッドの結果は同じですが、操作プロセスの観点から見ると、2 番目のメソッドは「ノード」です。 .classname" このメソッドは css と js の記述を分離します。これは明らかにより合理的で秩序立ったものです。 CSS ステートメントが比較的単純な場合、2 つの方法に違いはありませんが、CSS ステートメントが比較的複雑な場合は、明らかに 2 番目の方法の方が体系的です。

推奨学習:

css ビデオチュートリアル

以上がネイティブJSでCSSを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。