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

変更方法: 1. "element object.className" を使用してスタイル シートのクラス名を変更します。 2. "element object.style.cssTest" を使用して埋め込み CSS スタイルを変更します。 3. " を使用します。要素オブジェクト。「setAttribute()」ステートメントは、外部 CSS ファイルを変更することで要素のスタイルを変更します。

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

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

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

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

3. 外部 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

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

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

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

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

方法 3.obj.setAttributeを使用して外部 CSS ファイルを変更し、要素の CSS を変更します。

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

javascript 上級チュートリアル]

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