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 标记法书写所有的属性名,比如,必须使用 ...
随机推荐
- TCP头部格式详解，附Wireshark对TCP头部抓包分析
TCP之所以能为数据通讯提供可靠的传输,主要在于TCP数据包头部功能非常多. 那么,我们先来看看TCP头部格式(RFC 793.1323定义了TCP头部): TCP头部格式中的内容解析如下:(文末还有 ...
- Vijos1132:求二叉树的先序序列
描述 给出一棵二叉树的中序与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度≤8). 格式 输入格式 第一行为二叉树的中序序列第二行为二叉树的后序序列 输出格式 一行,为二叉树的先序 ...
- 算法导论笔记——第二十章 van Emde Boas树
当关键字是有界范围内的整数时,能够规避Ω(lglgn)下界的限制,那么在类似的场景下,我们应弄清楚o(lgn)时间内是否可以完成优先队列的每个操作.在本章中,我们将看到:van Emde Boas树支 ...
- WPF TabControl SelectionChanged 重复执行的问题
很邪门的问题,我曾经都感觉是微软的bug了. 问题是这样的:在我的tabcontrol下的tabitem中有一个combobox控件,由于一些原因,需要执行tabcontrol的SelectionCh ...
- xgene：之illumina，，ion-torrent
illumina技术: 工具:flowcell(流动池):8通道,每个通道都有 2种DNA引物 种在玻璃表面(用共价键连到Flowcell上),这引物和文库中的接头互补 Flowcell:8个l ...
- Windows下怎样安装Tomcat
Tomcat 是开源的WEB应用容器,所以受到各位程序员和公司的亲赖.在这里给大家介绍一下如何在Windows环境下安装Tomcat绿色版本,希望能够对大家有帮助. 1.首先去Tomcat官网下载To ...
- 无法搜索联机扩展 因为尝试与服务器联系 Visual studio 怎么解决?
根目录: devenv.exe.config 编辑: 修改如下即可: <system.net> <defaultProxy useDefaultCredentials="t ...
- FZU - 2214 Knapsack problem 01背包逆思维
Knapsack problem Given a set of n items, each with a weight w[i] and a value v[i], determine a way t ...
- 使用CTE生成辅助表(数字或时间)等
数字辅助表: , ;WITH Digital_Rangs(Digital) AS ( SELECT @start_digital UNION ALL FROM [Digital_Rangs] WHER ...
- 用Python分析国民生产总值
今天学习Python的matplotlib,书上的一道例题感觉写的很好(黄红梅的Python数据分析与应用),就是 利用matplotlib的各种图来对2000-2017年季度生产总值进行分析,这道题 ...