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(" ...
随机推荐
- 使用Lazy对构造进行重构后比较
用于测试在是否使用Lazy 的情况下,服务器负载,及服务提供情况对比. 服务器环境: 在此机器上安装了1 Hyper-V ,分配走1G内存,同时在本地上安装 SQLServer , 在 ...
- 关于运行robot framework 报错解决方法，ModuleNotFoundError: No module named 'robot'
报错: command: pybot.bat --argumentfile c:\users\76776\appdata\local\temp\RIDEiw0utf.d\argfile.txt --l ...
- jmeter 正则表达式的关联
在工作中,用JM录制了登录---退出的脚本,但是多次请求后发现,总是返回的录制脚本的时候使用的账号的数据. 经过研究发现,login后,响应里的每次返回的token值是变化的,顺着往下看,下一个请求中 ...
- DQL、DML、DDL、DCL的区别
1. 历史发展 SQL(Structure Query Language)语言是数据库的核心语言. SQL的发展是从1974年开始的,其发展过程如下:1974年-----由Boyce和Chamberl ...
- SQL语句之行操作
SQL语句系列 1.SQL语句之行操作 2.SQL语句之表操作 3.SQL语句之数据库操作 4.SQL语句之用户管理 关系型数据库的存储形式 在关系型数据库中,数据都是以类似于Excel表格的形式存储 ...
- windows系统如何校验MD5
需要首先安装openssl软件. 若安装了git for windows,则默认会带有openssl,不需要单独安装了. 打开git bash控制台,执行如下命令即可—— openssl md5 pa ...
- HDU 2879 数论
HeHe Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Submis ...
- 使用jenkins自动化构建android和ios应用
背景 随着业务需求的演进,工程的复杂度会逐渐增加,自动化的践行日益强烈.事实上,工程的自动化一直是我们努力的目标,能有效提高我们的生产效率,最大化减少人为出错的概率,实现一些复杂的业务需求应变.场景如 ...
- Mastering the Game of Go 论文阅读笔记
主要思想:用状态评估减少搜索深度,用动作采样减少搜索宽度. 参考文献:https://blog.csdn.net/songrotek/article/details/51065143
- Single Vendor Project in OpenStack
1.astara: ptl: name: Ryan Petrello irc: ryanpetrello email: ryan.petrello@dreamhost.com irc-channel: ...