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. 水题 等差数列HDU 5400 Arithmetic Sequence

    主要是要知道它对于等差数列的定义,单个数也可以作为等差数列且一定满足题意,另外就是要算清楚区间与区间的关系,考虑两大类情况,一种是d1区间和d2区间连在一起,另外一种情况就是其余情况. #includ ...

  2. ELK安装配置简单使用

    ELK是三款软件的总称,包括了elasticsearch.logstash.kibana,其实在生产使用中,我们还需要使用到其他的更多辅助软件来更好更合理的收集展示数据. Elasticsearch: ...

  3. poi解析Excel(转)

    下面是本文的项目结构: 项目中所需要的jar文件: 所用的Excel数据(2003-2007,2010都是一样的数据) 运行效果: /Excel2010/src/com/b510/common/Com ...

  4. MVVM里绑定TreeView控件的SelectedItem

    <TreeView x:Name="treeView"> <i:Interaction.Triggers> <i:EventTrigger Event ...

  5. 2014 ACM广东省赛总结

    2014年广东省赛在化工大学城开,5月10日开幕式&热身赛,5月11日正式赛. 热身赛的时候,开幕式说有两小时,于是我们愉快的切题了,像平常组队赛那样很快出了两题,但卡在后面两题切不动了.这时 ...

  6. Listbox 实现Item双击事件

    void listBox1_MouseDoubleClick(object sender, MouseEventArgs e) { int index = this.listBox1.IndexFro ...

  7. 使用CCProxy代理遇到的问题

    第一种:打开CCProxy后,客户端电脑无法连接上. 解决方案:主机是否开启了360里面的局域网隐藏,这个一定要关闭,否则客户端无法找到主机.另外一种情况,主机关闭局域网隐藏之后,一直遭受ARP攻击, ...

  8. Java基础--常用API--日期相关API

    一.java.util.Date 1.只用于显示系统时间,其大部分操作由Calendar代替. 格林威治时间(GMT):指的是1970年1月1日0时,不同地区有时间差. 默认输出格式:星期.月.日.时 ...

  9. video，audio用法小例子

    用此小程序设计播放/暂停,放大缩小 <!DOCTYPE html> <html> <body> <div style="text-align:cen ...

  10. JS高级学习历程-10

    [面向对象] 面向对象的三大特性:封装.继承.多态 封装:在“类”里边有关键字public.protected.private 对成员进行声明,这样每个成员的访问都会受到不同关键字的限制. 继承:在p ...