jQuery CSS 類LOGIN

jQuery CSS 類

透過 jQuery,可以輕鬆地對 CSS 元素進行操作。 切換 CSS 類別


jQuery 操作 CSS

jQuery 擁有若干進行 CSS 操作的方法。我們將學習下面這些:

  • addClass() - 在被選元素中新增一個或多個類別

  • removeClass() - 從被選元素刪除一個或多個類別

  • toggleClass() - 對被選元素進行新增/刪除類別的切換操作

  • ##css( ) - 設定或傳回樣式屬性


jQuery addClass() 方法

下面的範例展示如何在不同的元素中加入class 屬性。當然,在新增類別時,您也可以選取多個元素:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("h1,p").addClass("blue");
                $("div").addClass("important");
            });
        });
    </script>
    <style type="text/css">
        .important
        {
            font-weight:bold;
            font-size:xx-large;
        }
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>
</body>
</html>

執行程式嘗試


#您也可以在addClass() 方法中規定多個類別:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").addClass("important blue");
            });
        });
    </script>
    <style type="text/css">
        .important
        {
            font-weight:bold;
            font-size:xx-large;
        }
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<div id="div1">这是一些文本。</div>
<div id="div2">这是一些文本。</div>
<br>
<button>为第一个 div 元素添加类</button>
</body>
</html>

執行程式試試看


jQuery removeClass() 方法

下面的範例示範如何在不同的元素中刪除指定的class 屬性:

#實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("h1,h2,p").removeClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .important
        {
            font-weight:bold;
            font-size:xx-large;
        }
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>从元素中移除 class</button>
</body>
</html>

執行程式嘗試


jQuery toggleClass() 方法

下面的範例將展示如何使用jQuery toggleClass() 方法。此方法對被選元素進行新增/刪除類別的切換操作:

實例#

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("h1,h2,p").toggleClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 >标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>
</html>

執行程式嘗試



#下一節

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); }); </script> <style type="text/css"> .blue { color:blue; } </style> </head> <body> <h1 class="blue">标题 1</h1> <h2 >标题 2</h2> <p class="blue">这是一个段落。</p> <p>这是另外一个段落。</p> <br> <button>切换 class</button> </body> </html>
章節課件