jQuery操作CSS样式

更新时间：2022年05月04日 11:40:48 作者：.NET开发菜鸟

这篇文章介绍了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操作可分为如下几种：

样式操作。
内容及value属性值操作。
节点操作。
节点属性操作。
节点遍历。
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）是一种轻量级的数据交换格式。其语法如下：

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>

效果：

到此这篇关于jQuery操作CSS样式的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jQuery+json实现动态创建复杂表格table的方法
这篇文章主要介绍了jQuery+json实现动态创建复杂表格table的方法,涉及jQuery针对json数据的解析与表格动态创建操作相关技巧,需要的朋友可以参考下
2016-10-10
jQuery实现切换页面过渡动画效果
这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容，在页面加载的时候，使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史，需要的朋友可以参考下
2015-10-10
jQuery的deferred对象使用详解
deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。
2016-09-09
jQuery实现简易的天天爱消除小游戏
貌似最近腾讯手机游戏天天爱消除挺火的，我也是粉丝之一，最近对javascript一直比较感兴趣然后想用js仿造一个，应该不是太难，
2015-10-10
jquery.mousewheel实现整屏翻屏效果
jQuery Mousewheel 用于添加跨浏览器的鼠标滚轮支持。 mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event 外，还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。
2015-08-08
HTML5使用DeviceOrientation实现摇一摇功能
这篇文章主要介绍了HTML5使用DeviceOrientation实现摇一摇功能的相关资料,需要的朋友可以参考下
2015-06-06
jquery Ajax实现Select动态添加数据
这篇文章主要为大家详细介绍了jquery Ajax实现Select动态添加数据的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
jquery实现在光标位置插入内容的方法
这篇文章主要介绍了jquery实现在光标位置插入内容的方法,涉及jQuery功能的扩展技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
jQuery限制图片大小的方法
这篇文章主要介绍了jQuery限制图片大小的方法,对比分析了常见的jQuery限制图片操作方法及改进方法,具有一定参考借鉴价值,需要的朋友可以参考下
2016-05-05
基于jquery的一个图片hover的插件
很简单有趣的效果，逻辑很清楚，代码也简单，是练手的好东东。
2010-04-04