jQuery动态追加移除CSS样式
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样式的更多相关文章
- jQuery 动态添加、删除css样式
1.addClass css中: <style type="text/css"> .chColor {background: #267cb7;color:w ...
- jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...
- 关于jquery中用函数来设置css样式
关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...
- 动态为页面添加CSS样式文件引用
动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...
- JQ添加移除css样式
1. addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元素 ...
- JQ添加移除css样式--转载 心存善念
我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性 ...
- jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
- Jquery 动态追加控件并获取值
先展示通过动态添加控件的结果: 实现步骤: 1.引用js文件 <script src="Script/jquery-1.5.1.min.js" type="text ...
- Jquery中animate可以操作css样式属性总结
可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...
随机推荐
- Day08:继承与派生，多态，封装，绑定与非绑定方法，面向对象高级（反射,__str__,__del__）
上节课复习:1.编程思想 面向过程 核心是过程二字,过程指的是解决问题的步骤,即先干什么再干什么后干什么 基于该思想编写程序就好比在设计一条流水线,是一种机械式的思维 ...
- openStack灾备方案说明
本系列会分析OpenStack 的高可用性(HA)概念和解决方案: (1) OpenStack 高可用方案概述 (2) Neutron L3 Agent HA - VRRP (虚拟路由冗余协议) (3 ...
- AngularJs(Part 2)
I am still tired to translate these into Chinese. but who cares? i write these posts just for myself ...
- 《Java多线程编程核心技术》读后感（十）
一生产一消费:操作栈 本实例是使生产者向堆栈List对象中放入数据,使消费者从List堆栈中取出数据.List最大容量是1 package Third; import java.util.ArrayL ...
- 干货：SEO长尾关键词优化方法和技巧
在网站SEO优化上,优化比较成功的网站,根据SEO界前辈的经验结论,网站的总流量主要来源于长尾关键词,占网站总流量的80%.长尾关键词主要分布在网站的文章页,其次就是栏目页title.标签页.专题页等 ...
- SQL Server（五）——常用函数 转
1.数学函数:操作一个数据,返回一个结果 --取上限ceiling select code,name,ceiling(price) from car ; --取下限 floor select floo ...
- 简单的GTK窗体搭建
#include<gtk/gtk.h> //必须引用gtk/gtk.h这个头文件 2 int main(int argc,char *argv[]) //标准c语言主函数的声明 3 { 4 ...
- Django中ORM外键和表的关系(Django编程-4)
外键 在MySQL中,表有两种引擎,一种是InnoDB,另外一种是myisam.如果使用的是InnoDB引擎,是支持外键约束的.外键的存在使得ORM框架在处理表关系的时候异常的强大.因此这里我们首先来 ...
- MySQL数据库基础详解(非原创）
文章大纲 一.数据库简介二.Mysql数据库简介三.Mysql安装与服务启动(Windows版本)四.Mysql图形化工具五.Mysql存储引擎精讲六.Mysql数据类型介绍七.Mysql主要专业名称 ...
- 使用PowerDesigner创建物理模型并生成SQL语句在MySQL中生成表
我使用的PowerDesigner的版本为16.5,创建物理模型后,使用PowerDesigner生成的SQL语句,在MySQL中创建表. 1. 打开Power Designer软件,在弹出的欢迎对话 ...