ホームページ > 記事 > ウェブフロントエンド > HTML5 の classList 属性を使用して CSS クラスを操作する方法の詳細な説明
HTML5 の classList 属性を使用して CSS クラスを操作する方法の詳細な説明
- 黄舟オリジナル
- 2017-10-16 11:13:232480ブラウズ
この記事ではHTML5のclassList属性を使ってCSSクラスを操作する方法を中心に詳しく紹介していますが、編集者がとても良いと思ったので、参考として共有させていただきます。エディターをフォローして、一緒に見てみましょう
前書き
これまでは、クラス属性の特定のクラスを追加または削除するには、js または jquery のメソッド、hasClass、addClass、removeClass を使用する必要がありました。特定のスタイル変更を実現するには要素が必要ですが、それでも少し面倒です。
h5 の新しい classList を使用すると、要素のクラス名をより簡単に操作できるようになります。
注意
classListは互換性が低く、IE10未満のIEブラウザとは互換性がありません。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>classList</title>
<style>
.mystyle {
width: 300px;
height: 50px;
background-color: red;
color: white;
font-size: 25px;
}
</style>
</head>
<body>
<p>点击按钮为p元素添加 "mystyle" 类。</p>
<button onclick="myFunction()">点我</button>
<p id="myp">
我是一个 p 元素。
</p>
<script>
function myFunction() {
document.getElementById("myp").classList.add("mystyle");
}
</script>
</body>
</html>
新しいクラス
addメソッドを使用して、ページ要素に1つ以上のクラスを追加できます:
document.getElementById("myp").classList.add("mystyle");クラスを削除する
使用中Remove メソッドを使用すると、単一の CSS クラスを削除できます:
document.getElementById("myp").classList.remove("mystyle");要素内のクラス名を切り替えます
要素内のクラス名を切り替えます。 toggle メソッドを使用します。構文: toggle(class, true|false)
最初のパラメーターは要素から削除されるクラス名で、false を返します。
クラス名が存在しない場合は要素にクラス名を追加しtrueを返します。
2 番目はオプションのパラメーターです。ブール値の設定は、クラス名が存在するかどうかに関係なく、要素にクラスの追加または削除を強制するかどうかを設定するために使用されます。例:
document.getElementById("myp").classList.toggle("classToRemove", false);を追加します
document.getElementById("myp").classList.toggle("classToAdd", true);注: 2 番目のパラメータは Internet Explorer または Opera 12 以前ではサポートされていません
クラスが含まれているかどうかを確認してください
使用contains メソッドは、クラスが存在するかどうかを判断し、ブール値を返します。
以上がHTML5 の classList 属性を使用して CSS クラスを操作する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。