ホームページ > 記事 > ウェブフロントエンド > ネイティブJSでCSSを変更する方法
メソッドは次のとおりです: 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>実行結果は次のとおりです: 次に、上記の 2 番目の方法を使用して CSS スタイルを変更し、次の JavaScript コードを記述します:
<script type="text/javascript"> var root=document.getElementsByClassName("root")[0]; root.className="active";</script>同じ操作の結果は次のとおりです: 要約: これら 2 つのメソッドの結果は同じですが、操作プロセスの観点から見ると、2 番目のメソッドは「ノード」です。 .classname" このメソッドは css と js の記述を分離します。これは明らかにより合理的で秩序立ったものです。 CSS ステートメントが比較的単純な場合、2 つの方法に違いはありませんが、CSS ステートメントが比較的複雑な場合は、明らかに 2 番目の方法の方が体系的です。 推奨学習:
以上がネイティブJSでCSSを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。