JQuery笔记10:JQuery 样式操作

(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>


 案例:网页开关灯的效果

<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 等共存,用于调试浏览器兼容性很方便。


你可能感兴趣的:(JQuery笔记10:JQuery 样式操作)