ホームページ > 記事 > ウェブフロントエンド > 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"); }
推奨される関連チュートリアル:
以上がjsでcssを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。