ホームページ > 記事 > ウェブフロントエンド > ネイティブJSでCSSスタイルを変更する2つの方法
ネイティブJSでCSSスタイルを変更する2つの方法
- 迷茫オリジナル
- 2017-03-26 16:58:471711ブラウズ
ここで、ネイティブ JS で CSS スタイルを変更する 2 つの方法を紹介します:
1By node.style.cssText="css 式 1; css 式 2; css" JavaScript コード式 3 " は CSS スタイルを直接変更します。
2まずCSSスタイルシートで「アクティブクラス」などの特定のクラスのスタイルを設定し（ここでのアクティブクラスは想定されており、当面存在しません）、node.classname=を渡します。 JavaScript コード「 の active」により、CSS スタイル シート内のアクティブ クラスのスタイル設定がノードノードにアタッチされます。
以下は詳細な紹介です。最初は HTML コードです:
<style type="text/css">
p {
float: left;
padding: 20px;
margin: 10px;
border: 1px solid #000;
background-color: #fff;
color: #000;
}
.active
{
background-color:blue
}
</style>
<body>
<p class="root">
</p>
</body> は単なる p で、実行結果は 
です。まず、上記の最初の方法を使用して 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 番目のメソッドである "node.classname" メソッドが css と js の記述を分離しており、明らかにより合理的かつ順序立てられています。 CSS ステートメントが比較的単純な場合、2 つの方法に違いはありませんが、CSS ステートメントが比較的複雑な場合は、明らかに 2 番目の方法の方が体系的です。
以上がネイティブJSでCSSスタイルを変更する2つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。