検索

ホームページ  >  記事  >  ウェブフロントエンド  >  ネイティブJSでCSSを変更する方法

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

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-07-23 10:20:083517ブラウズ

メソッドは次のとおりです: 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 サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSスタイルを保存する方法次の記事：CSSスタイルを保存する方法

関連記事

続きを見る