jsでCSSスタイルを変更する方法

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

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

CSS スタイルを変更する JS メソッド:

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

コードを使用して 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.changeメソッドを使用リンク先の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");
 }

推奨される関連チュートリアル: CSS ビデオ チュートリアル

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