jQuery的css样式操作

jQuery的css样式操作

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有就删除，没有就添加样式

offset() 获取和设置元素的坐标

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <style>
        div{
            width:100px;
            height:260px;
        }
        div.whiteborder{
            border:2px white solid;
        }
        div.redDiv{
            background-color:red;
        }
        div.blueBorder{
            border: 5px blue solid;
        }
        table{
            margin: 1px auto 1px auto;
        }
    </style>
    <!--引入jQuery库-->
    <script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
    <script type="text/javascript">
      
      $(function(){
        var $divEle=$("div:first");
        $("#btn01").click(function(){
            //addClsss
            $divEle.addClass("redDiv blueBorder");
        });
        $("#btn02").click(function(){
            //removeClass
            $divEle.removeClass("redDiv");
            //如果括号里什么都不写，就会全部删掉
        });
        $("#btn03").click(function(){
            //toggleClass
            $divEle.toggleClass("redDiv");

        });
        $("#btn04").click(function(){
            //offset
            var pos=$divEle.offset();
            console.log(pos);
            
            $divEle.offset({
                top:100,
                left:50
            });
            console.log(pos);
        });
      });

      
    </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div class="border">

                    </div>
                </td>
                <td>
                    <div class="btn">
                        <input type="button" value="addClass()" id="btn01">
                        <input type="button" value="removeClass()" id="btn02">
                        <input type="button" value="toggleClass()" id="btn03">
                        <input type="button"value="offset()" id="btn04">
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>
posted @ 2021-04-23 13:11  ice--cream  阅读(64)  评论(0)    收藏  举报