ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript を使用して CSS スタイルシートを動的に変更する方法

JavaScript を使用して CSS スタイルシートを動的に変更する方法

不言オリジナル: 2018-11-29 17:54:562915ブラウズ

CSS クラス (スタイルシート) を JavaScript で動的に変更するにはどうすればよいですか? JavaScript でクラス名を変更するには、要素の className 属性を変更する必要があります。この記事ではJavaScriptを使ってCSS(スタイルシート)のクラスを動的に変更するコードを紹介します。

#例を直接見てみましょう

次の HTML ファイルを作成します。

JavaScriptChangeCssClass.html

<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function buttonClick() {
            target = document.getElementById("important");            
if (target != null) {
                target.className = "importantText";
            }
        }    
</script>
    <link rel="stylesheet" type="text/css" href="JavaScriptChangeCssClass.css"/>
</head>
<body>
    <p>这篇文章是很<span id="important">重要</span>的，需要特别注意。</p>
    <input id="Button1" type="button" value="button" onclick="buttonClick();"/>
</body>
</html>

JavaScriptChangeCssClass.css

.importantText{
   font-weight:700;   
   color:#FF0000;
   }

説明:

ボタンをクリックすると、次のコード部分が実行されます

function buttonClick() {
    target = document.getElementById("important");    
if (target != null) {
      target.className = "importantText";
    }
  }

 target = document.getElementById("important");

したがって、ID が重要な要素になります。この場合、「重要」で要素を取得できます。

 if (target != null) {
    target.className = "importantText";
  }

要素が取得できた場合はnull以外の値なのでif文の内側が実行されます。 className 属性を割り当てることで、要素のクラスを設定できます。この例では、クラス名に「重要テキスト」が設定されています。

この処理により

  <span id="important" class="importantText">重要</span>

ステータスが変化しました。

実行結果

Webブラウザを使用して上記のHTMLファイルを表示します。以下のような効果が表示されます。

JavaScript を使用して CSS スタイルシートを動的に変更する方法 #「ボタン」ボタンをクリックすると、次の効果が表示され、「重要」が赤いフォントになります。

JavaScript を使用して CSS スタイルシートを動的に変更する方法上記はこの記事の全内容です。さらに関連する興味深いコンテンツについては、php 中国語 Web サイトの

JavaScript ビデオチュートリアル

列を参照してください。！！

以上がJavaScript を使用して CSS スタイルシートを動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：Nodejsプログラムのインストール方法次の記事：Nodejsプログラムのインストール方法

続きを見る