jQuery對元素的CSS樣式操作(通過修改CSS類實現)


1.定義和用法:

  addClass(class):為所有匹配的元素添加指定的CSS類名

  注意:使用addClass()方式添加CSS類時,並不會刪除先有的CSS類。同時,在使用以上方法時,其class參數都可以設置多個類名,類名與類名之間用空格分開

  示例:

<body>
    <script type="text/javascript">
        //入口函數
        $(document).ready(function(){
            // 添加CSS樣式
            $("div").addClass("box")
        })
    </script>
    <div></div>
</body>

style.css代碼:

.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
}

  輸出:

 

 

  removeClass(class):從所有匹配的元素中刪除全部或者指定的CSS類

  示例:

<body>
    <script type="text/javascript">
        //入口函數
        $(document).ready(function(){
            // 添加CSS樣式
            $("div").addClass("box")
            // 刪除CSS樣式
            $("div").removeClass("box")
        })
    </script>
    <div></div>
</body>

 

  toggleClass(class):如果存在就刪除一個CSS類,如果不存在就添加一個CSS類

  示例:

<body>
    <script type="text/javascript">
        //入口函數
        $(document).ready(function(){
            // 添加CSS樣式
            $("div").addClass("box")
            // 刪除CSS樣式
            $("div").removeClass("box")
            //智能增減CSS樣式
            $("div").toggleClass("box")
        })
    </script>
    <div></div>
</body>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM