JavaScriptでクラスを変更する方法-フロントエンドQ&A-php.cn

JavaScript でクラスを変更する方法

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptでクラスを変更する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Feb 08, 2022 pm 02:22 PM

html javascript フロントエンド

JavaScript では、toggle() メソッドで classList 属性を使用してクラスを変更できます。classList 属性は、要素のクラス名を返すために使用されます。toggle() メソッドは、要素のクラス名を切り替えるために使用されます。要素内のクラス名。構文は「element .classList.toggle(classname)」です。

JavaScriptでクラスを変更する方法

このチュートリアルの動作環境: 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でクラスを変更する方法