jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法，一个是追加样式addClass，一个是移除样式removeClass，下面通过一个小例子讲解用法。
<!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样式的更多相关文章
- jQuery动态添加删除select项
// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- jquery动态添加列表后样式失效解决方式
最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字
有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...
- jQuery动态添加删除与添加表行代码
具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字（转载）
原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...
- jquery动态添加/删除 tr/td
<head runat="server"> <title></title> <!--easyui --> <link rel= ...
- Jquery动态添加/删除表格行和列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Jquery动态添加 删除 操作实现
这是gridView为空数据时显示的表头 下面直接填代码: function Add() { //动态添加行 $("#gridCustomerView").append(" ...
随机推荐
- django form tips
1.form将获取的参数传递到field 2.field中的函数 to_python 数据库到python中变量 get_prep_value python变量到数据库 validate 验证,也可以 ...
- js 删除removeChild与替换replaceChild
<input type="button" value="删除" id="btn" /> <input type=" ...
- python学习之路---day09
函数案例: return 可以终止函数后面的调用 def abc() print("1") print("2") print("3") pr ...
- java 加载properties
/** * 取得属性值,无值时返回默认值 * @param name String 属性名称 * @param defaultValue String 属性名称 * @return String 属性 ...
- C# Task超时规则
需要知道以下的知识 正规的骚操作:https://stackoverflow.com/questions/4238345/asynchronously-wait-for-taskt-to-comple ...
- 1137 Final Grading （25 分）
For a student taking the online course "Data Structures" on China University MOOC (http:// ...
- [转] domeOS 环境搭建 自动化构建部署
[From]http://dockone.io:82/article/4150 系统:CentOS Linux 7A机子(domeos服务器):1. gitlab安装(私有仓库):yum -y ins ...
- panda强化练习2
In [1]: import pandas as pd import numpy as np import matplotlib.pyplot as plt plt.rcParams['font.sa ...
- C#中Using里使用单例的问题
又给自己挖了一个坑跳进去. KafkaManager使用单例模型获取到一个producer,然而自己代码里用的时候加了一个using using (var producer = KafkaManage ...
- GraphQL 暂停
别人的文章 http://blog.csdn.net/imwebteam/article/details/53888708 Java 文档都打不开,已经在GitHub上提了 in README.md ...