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 动态添加、删除css样式

    1.addClass css中: <style type="text/css">       .chColor {background: #267cb7;color:w ...

  2. jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...

  3. 关于jquery中用函数来设置css样式

    关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...

  4. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

  5. JQ添加移除css样式

    1. addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元素 ...

  6. JQ添加移除css样式--转载 心存善念

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性 ...

  7. jQuery添加/改变/移除CSS类

    转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...

  8. Jquery 动态追加控件并获取值

    先展示通过动态添加控件的结果: 实现步骤: 1.引用js文件 <script src="Script/jquery-1.5.1.min.js" type="text ...

  9. Jquery中animate可以操作css样式属性总结

    可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...

随机推荐

  1. scores

    题意: m维偏序问题. 解法: 考虑对每一维按照每一个元素在这一维的数值分块,对于每一个块维护一个大小为 n 的bitset,表示前缀/后缀满足条件的元素集合. 对于每一个询问,我们可以枚举找到相应的 ...

  2. Http协议-报文

    2013的双12即将到来,网上购物是大家所熟悉的.看中小米电视时,可以先下订单然后再付款,电商根据订单将小米电视正确安全的送达给我们.包裹包含电视的基本信息及电视的使用说明书,使我们能够初步的了解它的 ...

  3. Linux下搭建tomcat集群全记录

    (转) Linux下搭建tomcat集群全记录 2011-10-12 10:23 6133人阅读 评论(1) 收藏 举报 tomcatlinuxapacheinterceptorsession集群 1 ...

  4. UVa 1663 Purifying Machine (二分匹配)

    题意:每一个01串中最多含有一个‘*’,‘*’既可表示0也可表示1,给出一些等长的这样的01串,问最少能用多少个这样的串表示出这些串. 如:000.010.0*1表示000.010.001.011,最 ...

  5. 读取静态Json文件

    创建web项目: string Json = string.Empty; string filePath = Server.MapPath("/***.json");//根目录下的 ...

  6. 存储过程为参数NULL时的处理方法

    准备一些数据: SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[Goods]( ) NULL, ) NULL, ...

  7. 洛谷P3003 [USACO10DEC]苹果交货Apple Delivery

    P3003 [USACO10DEC]苹果交货Apple Delivery 题目描述 Bessie has two crisp red apples to deliver to two of her f ...

  8. 一、接口测试——HTTPRunner二次开发之参数化一

    目前项目中在使用开源框架HTTPRunner,时间使用过程中会用到生成随机信息的方法,如生成随机姓名.随机手机号.身份证号.姓名.地址等.以下对二次开发的过程进行简要描述. 一.需求 1.需要测试的接 ...

  9. .bat 文件学习

    参考文章:http://www.cnblogs.com/glaivelee/archive/2009/10/07/1578737.html 重点: @echo off 关闭回显,不显示脚本中的命令 e ...

  10. ADO.NET 学习链接

    在博客园上,这个系列的文章对ADO.NET 总结的很好. ADO.NET 系列文章