class 添加样式,删，开关 【选择】addClass,removeClass,toggleClass
<1>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="script/jquery-1.11.0.min.js" type="text/javascript"></script>
<style type="text/css">
.class1{ color:Red}
.class2{ font-size:100px}
</style> <script type="text/javascript">
$(function () {
$("#btn1").click(function () { //当点击#btn1的时候给#div1加入一个class2的样式
$("#div1").addClass("class2")
})
})
$(function () {
$("#btn2").click(function () {
$("#div1").removeClass("class1") //当点击#btn2的时候移除#div1中的class1的样式
})
}) $(function () {
$("#btn3").click(function () {
$("#div1").toggleClass("class2") //当点击#btn2的时候就将原来的样式切换到class2样式，再点击#btn2的时候就在class2样式切换到原来的样式
})
}) $("textarea").attr("class", "class1") //将textarea的样式加入一个 class1 样式 $("textarea").attr("class", "class1 class2") //给textarea加入两个样式一个是class1样式，另外一个是class2样式 </script>
</head>
<body style=" background:red">
<div class="class1" id="div1">我是div</div>
<input type="button" value="加入样式"id="btn1" />
<input type="button" value="移除样式"id="btn2" />
<input type="button" value="切换样式"id="btn3" /> <textarea rows="5" cols="10">我是textarea</textarea>
</body>
</html>
<2>
<head>
<title></title>
<script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".btnClass1,.btnClass2").css("background", "red"); //将具有btnClass1，和btnClass2样式的表单的背景颜色设为红色
$("#b1,#b2").css("color", "blue"); //将id属性为 b1,或者b2的字体颜色设为蓝色,注意选择器是$("#b1,#b2")而不是$("#b1","#b2") $("input,p").css("color", "yellow"); //将input标签，和p标签的字体颜色设为黄色 $("body *").css("background", "yellow"); //将body以下全部的标签背景颜色设为黄色
}) </script> </head>
<body>
<input type="button" value="ok" class="btnClass1" id="b1"/>
<input type="button" value="ok" class="btnClass2" id="b2"/>
<div>1231</div>
<p>我是p</p>
</body>
</html>
版权声明：本文博主原创文章。博客，未经同意不得转载。
class 添加样式,删，开关 【选择】addClass,removeClass,toggleClass的更多相关文章
- jQuery addClass removeClass toggleClass hasClass is(.class)用法
jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...
- class 添加样式,删除，开关 【选择】addClass,removeClass,toggleClass
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- 原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
- jQuery addClass removeClass toggleClass方法概述
通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性 ...
- .addClass(),.removeClass(),.toggleClass()的区别
.addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector&quo ...
- Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]
1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...
- addClass, removeClass, toggleClass（从jquery中抠出来）
<div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...
- 原声js实现addClass removeClass toggleClass效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery为元素添加样式
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
随机推荐
- Silverlight技术调查(4)——完成的调查结果
原文 Silverlight技术调查(4)——完成的调查结果 客户端使用Silverlight+DXperience,可以在线编辑各种常见文本及富文本文档(doc.docx.rtf.txt.html… ...
- static作用
C程序一直由下列部分组成: 1)正文段——CPU运行的机器指令部分:一个程序仅仅有一个副本:仅仅读,防止程序因为意外事故而改动自身指令: 2)初始化数据段(数据段)——在程序中全部 ...
- unix ourhdr.h myerr.h
//在学UNIX环境高级编程时把下面两个头文件与源文件放在同一个文件下就可以正常编译了,我的是在ubuntu 12.04环境下,第一个程序编译和运行成功了,希望对大家有帮助(我已经根据网上的资料修改好 ...
- 让Delphi XE2程序支持UAC
在win7下,开发的程序有的时候莫名其妙就不能正常工作了,其实都是因为权限不够,要想能够正常运行,就需要获得管理员权限,这就需要处理UAC.具体方法如下: 一,制作“uac.manifest”文件.新 ...
- Problem B: Ternarian Weights
大致题意:使用三进制砝码采取相应的措施衡量出给定的数字主要思路:三进制,如果 大于 2 向前进位,之前一直没写好放弃了,这次终于写好了…… #include <iostream> #inc ...
- Python 生成的页面中文乱码问题
第一 保证 程序源文件里的中文的编码格式,如我们把 源文件的编码设置成utf8的. reload(sys) sys.setdefaultencoding('utf-8') 第二, 告诉浏览器,我们须要 ...
- Swift - 使用NSURL进行数据的提交和获取（POST与GET）
使用Swift进行iOS开发时,不可避免的要进行远程的数据获取和提交. 其数据请求的方式既可能是POST也可能是GET.同不管是POST还是GET又可以分为同步请求和异步请求. 下面通过四个例子来进行 ...
- 【deep learning学习笔记】注释yusugomori的LR代码 --- 模型测试
测试部分代码: void test_lr() { srand(0); double learning_rate = 0.1; double n_epochs = 500; int train_N = ...
- Eclipse中导入第三方源码的问题和备用解决方案
在前篇<配置BeanUtils包,同时也是对导入第三包的步骤说明>中,我已经将[commons-beanutils-1.9.2.jar]包导入,但是在使用BeanUtils进行日期转换的过 ...
- uva Matrix Decompressing (行列模型)
Matrix Decompressing 题目: 给出一个矩阵的前i行,前j列的和.要求你求出满足的矩阵. 矩阵的数范围在[1,20]. 一開始就坑在了这里.没读细致题目. 囧... 事 ...