JavaScriptでCSSスタイルを動的に変更する方法まとめ（4つの方法）

JavaScriptでCSSスタイルを動的に変更する方法まとめ（4つの方法）_JavaScriptスキル

WBOY

リリース： 2016-05-16 15:42:20

オリジナル

1400 人が閲覧しました

多くの場合、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

 <div>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <div 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()" />
  </div>
 </div>

ログイン後にコピー

方法 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

上に置かれても背景色が変化しません。

方法 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 を使用してスタイルシートのクラス名を変更します

次のコードのようなコードを使用して、btB 参照スタイルのクラス名を変更します。

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

ログイン後にコピー

btBのCSSのクラス名を変更してスタイルを変更するスタイルのクラス名を変更するには2つの方法があります。 1. obj.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 のスタイルを簡単に変更することもできます。個人的には、この方法が最も便利で、ページ全体のスキンを変更するための最良の解決策だと思います。