jQuery操作CSS樣式

更新時間：2022年05月04日 11:40:48 作者：.NET開發(fā)菜鳥

這篇文章介紹了jQuery操作CSS樣式的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、DOM操作分類

DOM Core：任何一種支持DOM的編程語言都可以使用它，例如：getElementById()。
HTML-DOM：用于處理HTML文檔，例如：document.forms。
CSS-DOM：用于操作CSS，例如：element.style.color="green"。

二、jQuery中的DOM操作

jQuery對JavaScript中的DOM操作進行了封裝，使用起來更加簡便。

jQuery中的DOM操作可分為如下幾種：

樣式操作。
內(nèi)容及value屬性值操作。
節(jié)點操作。
節(jié)點屬性操作。
節(jié)點遍歷。
CSS-DOM操作。

三、樣式操作

1、使用css()為指定的樣式設置樣式值

語法如下：

例如：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>樣式操作</title>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
           // 設置單個樣式
           //$("p").css("border","1px solid red");
           // 設置多個樣式
           $("p").css({"border":"1px solid blue","background-color":"green","color":"yellow"});
       });
    </script>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

效果：

補充：

JSON簡介

JSON（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式。其語法如下：

JSON的取值方法

可以使用點號表示法來獲取。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON示例</title>
    <script>
       // 獲取年齡
       var student={"name":"Tom","age":28};
       alert(student.age);

       var json={
           "student":[{"name":"Tom","age":24},
                      {"name":"Kevin","age":25},
                      {"name":"James","age":22}
       ]};
       alert(json.student[2].age);
    </script>
</head>
<body>
</body>
</html>

2、追加和移除樣式

使用jQuery可以同時追加或移除一個、多個樣式，語法如下：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>追加和移除樣式演示示例</title>
    <style>
      h2{
          margin: 0px;
          padding: 0px;
          font-size: 30px;
          margin-bottom: 10px;
      }
      /*邊框樣式*/
      .borderStyle{
          border: 2px solid red;
      }
      /*背景色樣式*/
      .bgcolorStyle{
          background-color: green;
      }
    </style>
     <!--引入jQuery-->
     <script src="../jquery-3.3.1.js"></script>
     <!--javascript-->
     <script>
        $(function(){
            // 獲取h2元素
            var h2Element=$("h2");
            // 追加邊框樣式
            $("#btnAdd").click(function(){
                h2Element.addClass("borderStyle");
            });
            // 追加背景色樣式
            $("#btnAddBgcolor").click(function(){
                h2Element.addClass("bgcolorStyle");
            });
            // 同時追加邊框和背景色樣式
            $("#btnAddMulit").click(function(){
                h2Element.addClass("borderStyle bgcolorStyle");
            });
            // 移除邊框樣式
            $("#btnRemove").click(function(){
                h2Element.removeClass("borderStyle");
            });
            // 移除背景色樣式
            $("#btnRemoveBgcolor").click(function(){
                h2Element.removeClass("bgcolorStyle");
            });
            $("#btnRemoveMulit").click(function(){
                h2Element.removeClass("borderStyle bgcolorStyle");
            });
        });
     </script>
</head>
<body>
    <h2>練習使用jQuery追加和移除樣式</h2>
    <input type="button" id="btnAdd" value="追加邊框樣式" />
    <input type="button" id="btnAddBgcolor" value="追加背景色樣式" />
    <input type="button" id="btnAddMulit" value="同時追加邊框和背景色樣式" />
    <input type="button" id="btnRemove" value="移除邊框樣式" />
    <input type="button" id="btnRemoveBgcolor" value="移除背景色樣式" />
    <input type="button" id="btnRemoveMulit" value="同時移除邊框和背景色樣式" />
</body>
</html>

效果：