JavaScriptでCSSを変更する方法

JavaScript で CSS を変更する方法: 1. obj.className を使用してスタイル シートのクラス名を変更します; 2. obj.style.cssTest を使用して埋め込み CSS を変更します; 3. obj.className を使用してスタイルシート名のクラスを変更する; 4. 外部 CSS ファイルを使用して CSS を変更します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

javascript CSS スタイルを動的に変更する方法のまとめ (4 つの方法)

Web ページ上の要素のスタイルを動的に変更する必要がある場合が多くあります。 JavaScript には動的にスタイルを変更する方法がいくつか用意されており、その使い方、効果、欠点などを以下に紹介します。

1. obj.className を使用して、スタイル シートのクラス名を変更します。

2. obj.style.cssTest を使用して、埋め込み CSS を変更します。

3. obj.className を使用して、スタイル シートのクラス名を変更します。

4. 外部 CSS ファイルを使用して要素の CSS を変更する

以下は、上記の内容を説明するための HTML コードと CSS コードの一部です。手法の違い。

#CSS

.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; }

.style1:hover{ background-color:#66B3FF; cursor:pointer;}

.style2{margin:10px auto ;background-color:gray; display:block;color:black; border:1px solid white; padding:10px 25px; font-size:18px; }

.style2:hover{ background-color:black; color:White; cursor:pointer}

HTML

 <p>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <p id="tool">
   <input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/>
   <input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
   <input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
   <input type="button" value="更改外联css样式" onclick="recover()" />
  </p>
 </p>

方法 1. obj.className を使用して、スタイルシート名

以下のコードから、ob.style.cssTest がどのように btnB のスタイルから来ているかがわかります。

 function changeStyle1() {
   var obj = document.getElementById("btnB");
   obj.style.backgroundColor= "black";

 }

このコードは btB のテキストの色を変更します。ブラウザでデバッグ ツールを開くと、btB タグ [style="inline>outline] に追加の属性があることがわかります。また、btB の背景hove 疑似クラスの -color スタイルはインラインで記述されるため、埋め込まれた背景色が疑似クラスを覆い、マウスが btB 上に置かれても背景色が変化しません。

Method 2、obj.style.cssTest を使用して埋め込み css を変更します

JavaScript コードを直接アップロードします:

 function changeStyle2() {
   var obj = document.getElementById("btnB");
   obj.style.cssText = "background-color:black; display:block;color:White;

}

このコードは [1] と同じです。

方法 3. obj.className を使用してスタイル シートのクラス名を変更します

コードを使用して、 edit btB 次のコードのように、スタイルのクラス名を参照します:

 function changeStyle3() {
   var obj = document.getElementById("btnB");
   //obj.className = "style2";
   obj.setAttribute("class", "style2");
 }

btB の CSS のクラス名を変更してスタイルを変更します。スタイル クラス名を変更するには 2 つの方法があります。 className = "style2"; 2. obj.setAttribute("class", "style2"); 同じ効果があります。

#このメソッドを使用して CSS を変更すると、上記の効果よりもはるかに優れています。

方法 4: 外部リンクの CSS ファイルを変更して要素の CSS を変更する

## 外部 CSS ファイルの参照を変更することで、btB のスタイルを変更します。非常に簡単です。コードは次のとおりです: まず、外部の CSS ファイルを引用する必要があります。コードは次のとおりです:

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>

function changeStyle4() {
   var obj = document.getElementById("css");
   obj.setAttribute("href","css2.css");
 }

これにより、btB のスタイルも簡単に変更できます。私個人としては、この方法がページ全体のスキニングを達成するために使用するのに最適であると考えています。最良の解決策です。

[推奨学習:

javascript 上級チュートリアル

]

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