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

ネイティブJSでCSSスタイルを変更する2つの方法

迷茫

リリース： 2017-03-26 16:58:47

オリジナル

1764 人が閲覧しました

ここで、ネイティブ 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 サイトの他の関連記事を参照してください。