JavaScript で Web ページのスタイルを変更できますか?

Javascript は Web ページのスタイルを変更できます。方法: 1. "element object.style.cssTest="style value"" ステートメントを使用して変更します。 2. "element object.setAttribute( "class", "value" )" ステートメントの変更; 3. 外部 CSS ファイルを変更して Web ページのスタイルを変更します。

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

JavaScript は Web ページのスタイルを変更できます。

JavaScript では、CSS コードを動的に変更することで Web ページのスタイルを変更できます。

JavaScript で CSS コードを変更する方法

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

2. スタイル オブジェクトの 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: 10px25px;
    font - size: 18px;
}
.style2: hover {
    background - color: black;
    color: White;
    cursor: pointer
}

html コード:

<div>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <div 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()" /></div>
</div>

方法 1. obj.style.cssTest を使用して、埋め込まれた CSS

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

方法 2. bj.setAttribute を使用してスタイル シートのクラス名を変更します。

コードを使用して、次のように 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");
 }

[関連する推奨事項: javascript ビデオ チュートリアル , ウェブ フロントエンド ]

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