ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSスタイルをJSに置き換える方法
CSS スタイルを js に置き換える方法: 1. obj.className を使用してスタイル シートのクラス名を変更します; 2. obj.style.cssText を使用して埋め込み CSS を変更します; 3. obj.className を使用します変更するスタイルシートのクラス名; 4. 外部CSSファイルを変更します。
この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
CSS スタイルを JS に置き換えるにはどうすればよいですか?
javascript CSS スタイルを動的に変更するメソッドのまとめ - 4 つのメソッド
特別な効果を実現するには、JavaScript を使用して動的に変更する必要があります。変更する 特定のラベルの CSS 属性の CSS スタイルを動的に変更するにはどうすればよいですか?この問題に直面した場合、エディターは JavaScript を使用して CSS スタイルを動的に変更する問題を解決するよう導きます。さあ、学んでください。
多くの場合、スタイルを動的に変更する必要があります。 Web ページ上の要素を修正します。 JavaScript には動的にスタイルを変更する方法がいくつか用意されており、その使い方、効果、欠点などを以下に紹介します。
1. obj.className を使用して、スタイル シートのクラス名を変更します。
2. obj.style.cssText を使用して埋め込み CSS を変更します。
3. obj.className を使用して、スタイル シートのクラス名を変更します。
4. 外部 CSS ファイルを使用して要素の css を変更する
以下は、上記の方法の違いを説明するための HTML コードと 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}
<p> <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" /> <p 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()" /> </p> </p>
ご覧のとおり、以下のコード、ob .style.cssText が btnB のスタイルからどのように取得されるか。
function changeStyle1() { var obj = document.getElementById("btnB"); obj.style.backgroundColor= "black"; }
このコードは btB のテキストの色を変更します。ブラウザでデバッグ ツールを開くと、btB タグ [style="inline>outline] に追加の属性があることがわかります。また、btB の背景hove 疑似クラスの -color スタイルはインラインで記述されるため、埋め込まれた背景色が疑似クラスを覆い、マウスが btB 上に置かれても背景色が変化しません。
JavaScript コードを直接アップロードします。
function changeStyle2() { var obj = document.getElementById("btnB"); obj.style.cssText = "background-color:black; display:block; color:White; }
このコードの効果は [1] と同じであり、欠点も同じです。
次のコードに示すように、コードを使用して 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 を変更すると、上記の効果よりもはるかに優れています。
外部 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 のスタイルを簡単に変更することもできます。個人的には、この方法が最も便利で、ページ全体のスキニングを実現するための最良のソリューションだと思います。
[推奨学習] : JavaScript 基本チュートリアル]
以上がCSSスタイルをJSに置き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。