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. 蓝桥杯Log大侠(线段树单点区间更新)

    标题:Log大侠 atm参加了速算训练班,经过刻苦修炼,对以2为底的对数算得飞快,人称Log大侠. 一天,Log大侠的好友 drd 有一些整数序列需要变换,Log大侠正好施展法力... 变换的规则是: ...

  2. Oracle中的float类型字段

    Oracle中的float类型对应着C#中的decimal类型

  3. CentOS下安装配置Samba服务器

    0 环境介绍 VMWARE12下安装的CENTOS7虚拟机.宿主机为WIN7. 1 离线安装 费了九牛二虎之力,下载各种依赖,还是有问题,转向在线安装. 2 在线安装 虚拟机采用默认的配置: 其次,网 ...

  4. va_list函数学习

    当你的函数的参数个数不确定时,就可以使用上述宏进行动态处理,这无疑为你的程序增加了灵活性. va_list的使用方法: a)  首先在函数中定义一个具有va_list型的变量,这个变量是指向参数的指针 ...

  5. unique（）函数

    unique()是c++里面的一个去重函数,包含在<iostream>中. 该函数将重复的元素移至容器的末尾,返回的为前面的无重复项的尾地址. 由于返回的是地址,所以经常需要转换为数值使用 ...

  6. unity3d GUI字体设置

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class click001 ...

  7. SqlHelper 增删改查

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  8. JS Guid生成

    function numToGuid(uid) { var str = "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa"; var l = uid.to ...

  9. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

  10. 关于lspci命令

    lspci是一个用来查看系统中所有PCI总线以及连接到该总线上的设备的工具. 命令格式为 lspci -参数 (不加参数显示所有硬件设备) 至于有哪些参数及其详细用法可以看下这篇博客:http://w ...