HTML5 の classList 属性を使用して CSS クラスを操作する方法の詳細な説明-H5 チュートリアル-php.cn

HTML5 の classList 属性を使用して CSS クラスを操作する方法の詳細な説明

黄舟

リリース： 2017-10-16 11:13:23

オリジナル

2509 人が閲覧しました

この記事では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 サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

HTML5 の classList 属性を使用して CSS クラスを操作する方法の詳細な説明