jquery操作样式

添加样式、删除样式

切换样式

css("属性","值")

css("属性","值"), 修改多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <style>
        .add-class{
            background-color: #0f0;
            padding: 5px;
            border: 3px solid #000;
        }
    </style>
</head>
<body>
<h1>操作样式</h1>
<button id="btn">添加样式</button>
<button id="btn2">删除样式</button>
<button id="btn3">切换样式</button>
<button id="btn4">css函数修改样式</button>
<p>这是p标签</p>
</body>
</html>
<script>
    $(document).ready(function () {
        //css("属性","值"), 修改多个
        $("#btn4").click(function () {
            $("p").css({
                "backgroundColor": "red",
                "color": "blue"
            });
        });

        // //css("属性","值")
        // $("#btn4").click(function () {
        //     $("p").css("backgroundColor", "red");
        // });

        // //切换样式
        // $("#btn3").click(function () {
        //     $("p").toggleClass("add-class");
        // });

        // //添加样式
        // $("#btn").click(function () {
        //     $("p").addClass("add-class");
        // });
        //
        // //删除样式
        // $("#btn2").click(function () {
        //     $("p").removeClass("add-class");
        // });
    });
</script>

测开之路一百零四：jquery操作样式的更多相关文章

  1. 测开之路一百零三：jquery元素和标签的插入与删除

    标签内插入 标签外插入 给标签加标签 !DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  2. 测开之路一百零二：jquery元素操作

    jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...

  3. 测开之路一百零一：jquery文字特效、动画、方法链

    文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...

  4. 测开之路一百零九：bootstrap列表

    bootstrap列表 引入bootstrap标签 原本的效果 水平显示 bootstrap列表 列表组合框 在组合框后面加备注 突出显示 a标签列表 <!DOCTYPE html>< ...

  5. 测开之路一百零七：bootstrap排版

    引入bootstrap和jquery 标题 对齐 正文强调 引言 <!DOCTYPE html><html lang="en"><head> & ...

  6. 测开之路一百零六：bootstrap布局

    可以在html的head里面加一些说明 <meta http-equiv="X-UA-Compatible" content="IE=edge">& ...

  7. 测开之路一百零五：bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  8. 测开之路一百五十四：ajax+json前后台数据交互

    在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...

  9. 测开之路一百五十二：基于jquery的ajax实现之load、get、ajax

    ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一 ...

随机推荐

  1. Springboot+Mybatis AOP注解动态切换数据源

    在开发中因需求在项目中需要实现多数据源(虽然项目框架是SpringCloud,但是因其中只是单独的查询操作,觉得没必要开发一个项目,所以采用多数据源来进行实现) 1.在配置文件中创建多个数据连接配置 ...

  2. spring controller 方法测试

    controller 测试 不使用其他api接口测试工具 一般而言,我们写好一个模块后,会对其进行单元测试,再集成到现有的系统中. 但是呢~针对Controller.Service.Dao三层来说,我 ...

  3. 【问题解决方案】git仓库重构

    Linux mv命令 用来为文件或目录改名.或将文件或目录移入其它位置. 语法 mv [options] source dest mv [options] source... directory 注: ...

  4. react 从商品详情页返回到商品列表页，列表自动滚动上次浏览的位置

    现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好, 遇到的问题: 1:如何将数据缓存, 2:如何获取和保存列表滑动的高度, 3:判 ...

  5. Kafka在windows下的配置使用

    Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实时的处理大量 ...

  6. nsswitch.conf - 系统数据库及名字服务开关配置文件

    DESCRIPTION C 程序库里很多函数都需要配置以便能在本地环境正常工作, 习惯上是使用文件(例如`/etc/passwd') 来完成这一任务. 但别的名字服务, 如网络信息服务NIS, 还有域 ...

  7. 【学习】020 Redis

    Java缓存机制 Java中要用到缓存的地方很多,首当其冲的就是持久层缓存,针对持久层谈一下:  要实现java缓存有很多种方式,最简单的无非就是static HashMap,这个显然是基于内存缓存, ...

  8. vecto容器中一些没有注意到的地方

    vector容器 vectoor是一个单口容器. vector动态增长的基本原理 当插入新元素的时候,如果空间不足,那么vector会重新申请更大的一块内存空间,将原空间数据拷贝到新空间,释放旧空间的 ...

  9. python json、pickle

    文章部分转自:https://www.cnblogs.com/lincappu/p/8296078.html json:用于字符串和Python数据类型间进行转换pickle: 用于python特有的 ...

  10. vue项目中 指令 v-html 中使用过滤器filters功能

    转载于简书 链接:http://www.jianshu.com/p/29b7eaabd1ba 问题 2.0 filters only work in mustache tags and v-bind. ...