JQueryノート10:JQueryスタイル操作

2331 ワード

(1)スタイルattrを取得する(「class」)(2)スタイルattrを設定する(「class」>「myclass」)(3)スタイルaddClassを追加する(「myclass」)(他のスタイルに影響しない)(4)スタイルremoveClassを削除する(「myclass」)(5)スタイルを切り替える(スタイルがある場合はスタイルを削除し、スタイルがない場合はスタイルを追加する)toggleClass(「myclass」)(6)スタイルが存在するかどうかを判断します:hasClass(「myclass」)ケース:追加、削除、スタイルの切り替え.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .class1{background-color:Red;}
    .class2{font-size:50px;}
    </style>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#addclass").click(function () {
                $("p").addClass("class2");
            });
            $("#removeclass").click(function () {
                $("p").removeClass("class2");
            });
            $("#toggleclass").click(function () {
                $("p").toggleClass("class2");
            });
        });    
    </script>
</head>
<body>
<p class="class1">           </p>
<input id="addclass" type="button" value="    " />
<input id="removeclass" type="button" value="    " />
<input id="toggleclass" type="button" value="  " />
</body>
</html>

ケース:Webスイッチの効果

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .night{background-color:Black;}
    </style>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $("#toggleclass").click(function () {
                $(document.body).toggleClass("night");
            });
        });    
    </script>
</head>
<body>
<input id="toggleclass" type="button" value="   " />
</body>
</html>

IECollection:このソフトウェアはIE 6 7 8などを共存させることができ、ブラウザの互換性をデバッグするのに便利です.

js未分類

Angularjsによるスライド効果