JavaScript HTML DOM - CSS の変更

JavaScript で CSS を変更するには 4 つの方法があります: ノードスタイル (インラインスタイル) を変更する;

新しい CSS を作成する;

ページ内のスタイルシートを置き換える。

後の 2 つの方法の使用は推奨されません。ほとんどすべての機能は最初の 2 つの方法で実現でき、コードはより明確で理解しやすくなります。

ノードスタイルの変更(インラインスタイル)

このメソッドは最も重みが高く、ノードのスタイル属性に直接書き込まれます。他のメソッドで設定されたスタイルをオーバーライドします。使用法は非常に簡単です:

var element = document.getElementById("test");

element.style.display = "none" //要素を非表示にします

ただし、一部の CSS スタイルには注意してください。 name は、font-size、background-image などの複数の単語で構成され、それらがすべてダッシュ (-) で接続されています。ただし、JavaScript ではダッシュは「マイナス」を意味するため、として使用できません。属性名。 fontSize、backgroundImage などの属性名を記述するには、「camelCase」を使用する必要があります。また、多くのスタイルには単位があるため、単に数値を指定することはできないことにも注意してください。たとえば、fontSize の単位には、px、em、% (パーセント) などが含まれます。

Change class、id

idとclassは、スタイルを設定するための「フック」です。変更後、ブラウザは要素のスタイルを自動的に更新します。 IDを変更する方法はクラスの方法と似ていますが、IDは要素を見つけるために使用されるため、個人的にはこの方法を使用することはお勧めしません。要素の表示スタイルを定義するために使用しないことをお勧めします。 JavaScript フックとしてよく使用されますが、不要なエラーが発生する可能性があります。

JavaScript では、class は予約されたキーワードであるため、要素クラスにアクセスするには属性として className を使用します (例:

.redColor{

color: red;

}

)。 yellowBack {

background: yellow;

}

element.className = "redColor";//クラスを設定

element.className += " yellowBack";//クラスを追加

HTML 要素のスタイルを変更するには、通常、次の構文を使用してください:

document.getElementById(id).style.property=new style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
  <h1 id="id1">标题</h1>
  <button type="button" onclick="document.getElementById('id1').style.color='blue'">点击改变</button>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function setSize() { document.getElementById("t2").style.fontSize = "30px"; } function setColor() { document.getElementById("t2").style.color = "red"; } function setbgColor() { document.getElementById("t2").style.backgroundColor = "blue"; } function setBd() { document.getElementById("t2").style.border = "3px solid #FA8072"; } </script> </head> <body> <div id="t2">欢迎光临！</div> <p><button onclick="setSize()">大小</button> <button onclick="setColor()">颜色</button> <button onclick="setbgColor()">背景</button> <button onclick="setBd()">边框</button> </p> </body> </html>

提出するリセットコード

自動運転