ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptでクラスを変更する方法
JavaScriptでクラスを変更する方法
- WBOYオリジナル
- 2022-02-08 14:22:562520ブラウズ
JavaScript では、toggle() メソッドで classList 属性を使用してクラスを変更できます。classList 属性は、要素のクラス名を返すために使用されます。toggle() メソッドは、要素のクラス名を切り替えるために使用されます。要素内のクラス名。構文は「element .classList.toggle(classname)」です。
このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript でクラスを変更する方法
classList 属性は、要素のクラス名を DOMTokenList オブジェクトとして返します。
このプロパティは、要素内の CSS クラスを追加、削除、切り替えするために使用されます。
classList プロパティは読み取り専用ですが、add() メソッドとremove() メソッドを使用して変更できます。
構文は次のとおりです。
element.classList
add(class1, class2, ...) 1 つ以上のクラス名を要素に追加します。
指定されたクラス名が既に存在する場合、追加されません。
contains(class) は、指定されたクラス名が存在するかどうかを判断するブール値を返します。
可能な値:
true - 要素パッケージにはすでにクラス名が含まれています
false - クラス名が要素に存在しません
item( Index) 要素内のインデックス値に対応するクラス名を返します。インデックス値は0から始まります。
インデックス値が範囲外の場合は null を返します。
remove(class1, class2, ...) 要素から 1 つ以上のクラス名を削除します。
注: 存在しないクラス名が削除された場合、エラーは報告されません。
toggle(class, true|false) 要素内のクラス名を切り替えます。
最初のパラメータは要素から削除されるクラス名であり、false を返します。
クラス名が存在しない場合は、要素にクラス名が追加され、true が返されます。
2 番目はオプションのパラメーターで、クラス名が存在するかどうかに関係なく、要素にクラスの追加または削除を強制するかどうかを設定するために使用されるブール値です。例:
クラスの削除: element.classList.toggle("classToRemove", false);
クラスの追加: element.classList.toggle("classToAdd", true);
例は次のとおりです。
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.mystyle {
width: 300px;
height: 50px;
background-color: coral;
color: white;
font-size: 25px;
}
.newClassName {
width: 400px;
height: 100px;
background-color: lightblue;
text-align: center;
font-size: 25px;
color: navy;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>点击按钮切换类名。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 classList 属性。</p>
<div id="myDIV" class="mystyle">
我是一个 DIV 元素。
</div>
<script>
function myFunction() {
document.getElementById("myDIV").classList.toggle("newClassName");
}
</script>
</body>
</html>出力結果:
#関連する推奨事項:
以上がJavaScriptでクラスを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。