jQuery框架提供了两个CSS样式操作方法，一个是追加样式addClass，一个是移除样式removeClass，下面通过一个小例子讲解用法。

jQuery动态追加移除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>jQuery动态添加删除CSS样式</title>

    <script type="text/javascript" src="http://localhost/libs/jquery/2.1.1/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#btn1").click(function() {

                $('#txtContent').addClass('red'); //追加样式

            });

            $("#btn2").click(function() {

                $('#txtContent').removeClass('red'); //移除样式

            });

            $("#btn3").click(function() {

                $('#txtContent').addClass('red weight family'); //追加多个样式

            });

            $("#btn4").click(function() {

                $('#txtContent').removeClass('red weight'); //移除多个样式

            });

            $("#btn5").click(function() {

                $('#txtContent').removeClass(); //移除所有样式

            });

        });

    </script>

    <style type="text/css">

        .default {

            font-size: 30px;

        }

        .red {

            color: red;

        }

        .weight {

            font-weight: bold;

        }

        .family {

            font-family: "华文隶书"

        }

    </style>

</head>

<body>

    <div id="txtContent" class="default">你好呀！jQuery基础知识！</div><br />

    <input id="btn1" type="button" value="追加样式" />

    <input id="btn2" type="button" value="移除样式" />

    <input id="btn3" type="button" value="追加多个样式" />

    <input id="btn4" type="button" value="移除多个样式" />

    <input id="btn5" type="button" value="移除所有样式" />

</body>

</html>
 

jQuery动态添加删除CSS样式的更多相关文章

  1. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  2. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  3. jquery动态添加列表后样式失效解决方式

    最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...

  4. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字

    有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...

  5. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  6. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字（转载）

    原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...

  7. jquery动态添加/删除 tr/td

    <head runat="server"> <title></title> <!--easyui --> <link rel= ...

  8. Jquery动态添加/删除表格行和列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Jquery动态添加 删除 操作实现

    这是gridView为空数据时显示的表头 下面直接填代码: function Add() { //动态添加行 $("#gridCustomerView").append(" ...

随机推荐

  1. phpstorm利用database连接mysql数据库

    首先声明一点,database只能连接一个已存在的数据库,不能创建数据库 连接一个已存在的数据库步骤: 1,找到database:连续点击俩次shift,输入database就能找到了 2,点击绿色的 ...

  2. 利用EFCore 封装Repository（可扩展不同数据的sql操作）

    本篇是对EFCore 进行下封装并实现基本的增删改查的同步异步方法及针对不同数据库的批量插入.sql语句直接操作数据库: 一. 先定义基础仓储接口IRepository public interfac ...

  3. requirejs重点

    1.shim:用于配置不是通过define函数包装的文件,导出什么东西,如果这个文件不再baseURL目录下的话,需要在paths中配置文件目录.并且paths中的键名.shim中的键名.requir ...

  4. python学习之路---day19--面向对象--约束

    约束和异常一:约束: 约束方法:(解释:就相当于在想项目中,先提前规划好框架和约定基本代码,像定义好调用的名字后,后面的名字只能用这个,用其他的 名字就会抛出异常.错误) 1:提取父类,然后再父类中定 ...

  5. vue 利用 v-model 实现 双向传递数据..

    注意 <input type='hidden' :value='value'/> 变量名必须 是 value--- 不能叫其他名字++

  6. D3.js v4版本 按住shift键框选节点demo

    http://download.csdn.net/download/qq_25042329/10139649

  7. [转] 浏览器自动化测试初探：使用 phantomjs 与 casperjs

    [From] https://www.qcloud.com/community/article/641602001489391648 作者:yangchunwen 首先要解释一下为什么叫浏览器自动化测 ...

  8. img，bg

    img vertical-align:middle;    设置页面垂直居中的,如果无效的话使用 display:table-cel,讲块元素转化为单元格,在使用vertical-align属性水质居 ...

  9. html自定义垂直导航菜单

    html自定义垂直导航菜单(目前只支持上级+下级两级菜单) 由于工作的需要,昨天花了三个多小时的事件整理了一份关于垂直导航二级菜单,可以通过js配置的方式初始化菜单box(测试环境:chrome 49 ...

  10. webstorm 搜索vue文件

    1. Show IDE settings 状态修改为 ON