jQuery の属性とスタイル (4)

クラス名を動的に変更することで、要素を変更してさまざまな効果を示すことができます。 HTML 構造では、複数のクラスがスペースで区切られます。ノード (またはラベル) に複数のクラスが含まれる場合、DOM 要素の応答の className 属性はクラス名の配列ではなく、スペースを含む文字列を取得します。マルチクラスの操作は非常に面倒です。同じ jQuery 開発者もこの状況を考慮し、クラス名を動的に追加するための .addClass() メソッドを追加しました

addClass( className ) メソッド

次のコードを見てください:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
        }
        .bg{
            background:red;
        }
    </style>
</head>
<body>
    <div id="div">php 中文网</div>

    <script type="text/javascript">
        $("#div").addClass('bg');
    </script>
</body>
</html>

removeClass() スタイルを削除します

次の場合:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
        .div{
            width:200px;
            height:200px;
            background:red;
        }
    </style>
</head>
<body>
    <div class="div">php 中文网</div>

    <script type="text/javascript">
        $(".div").removeClass("div");
    </script>
</body>
</html>

上記のコードにより、divのスタイルが削除されます

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> div{ width:200px; height:200px; } .bg{ background:red; } </style> </head> <body> <div id="div">php 中文网</div> <script type="text/javascript"> $("#div").addClass('bg'); </script> </body> </html>

提出するリセットコード

自動運転