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. Behave + Selenium(Python)一：

    Behave 介绍:(来自T先生) 最近一个项目用了behave来做测试,因为之前没有接触过,所以写下最近的心得总结. 做自动化的人估计对selenium已经不是很陌生了,但是对于Behave工具,估 ...

  2. mysql两主多从

    1.实现目标 目标清单: 1)Master(192.168.31.230)为正常运行环境下的主库,为两个Slave(192.168.31.231和192.168.31.232)提供“主-从”复制功能: ...

  3. python3-----反射实例

    #/usr/bin/env python # -*- coding:utf-8 -*- import sys,os class WebServer(object): def __init__(self ...

  4. Fran&ccedil;ois&nbsp;Hollande’s&amp;…

    EVER since President François Hollande was elected last May, things have not gone right for him. He ...

  5. 转：使用 VisualVM 进行性能分析及调优

    使用 VisualVM 进行性能分析及调优 VisualVM 是一款免费的\集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括 ...

  6. NOIP2014提高组 联合权值（距离为2的树形dp）

    联合权值 题目描述 无向连通图 GG 有 nn 个点,n-1n−1 条边.点从 11 到 nn 依次编号,编号为 ii 的点的权值为 W_iWi​,每条边的长度均为 11.图上两点 (u, v)(u, ...

  7. IOSerialize,xml和json，soap序列化器,二进制序列化器,XML序列化器,文件 检查、新增、复制、移动、删除

    1 文件夹/文件 检查.新增.复制.移动.删除,2 文件读写,记录文本日志/读取配置文件3 三种序列化器4 xml和json1.文件夹/文件 检查.新增.复制.移动.删除,2 文件读写,记录文本日志/ ...

  8. 痞子衡嵌入式：微处理器CPU性能测试基准(Dhrystone)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是微处理器CPU性能测试基准Dhrystone. 在嵌入式系统行业用于评价CPU性能指标的标准主要有三种:Dhrystone.MIPS.C ...

  9. 浅谈Unity的渲染优化(1)： 性能分析和瓶颈判断（上篇）

    http://www.taidous.com/article-667-1.html 前言 首先,这个系列文章做个大致的介绍,题目"浅谈Unity",因为公司和国内大部分3D手游开发 ...

  10. CentOS6.5安装sqlite3[转]

    1.下载安装包:https://www.sqlite.org/download.html 2.解压 [root@mycentos ~]# tar xzvf sqlite-snapshot-201809 ...