jsでcssを変更する方法

js で CSS を変更する方法: 1. [obj.style.cssTest] を使用して埋め込み CSS を変更します; 2. [bj.className] を使用してスタイル シートのクラス名を変更します; 3. を使用します外部リンクされた CSS ファイルを変更することで、要素の CSS が変更されます。

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

js で css を変更する方法:

方法 1. obj.style.cssTest を使用して埋め込み css を変更します

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

方法 2. bj.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 を変更すると、上記の方法よりもはるかに優れた効果が得られます。

方法 3: 外部リンクの 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 サイトの他の関連記事を参照してください。