jQery 操作CSS
jQuery操作CSS也是很方便的,咱先看看这几个常用的方法:
- addClass():向一个元素添加一个或者多个类。
- removeClass():从一个元素中删除一个类或多个类。
- toggleClass:对元素进行 添加/删除(切换方式) 某个类。
- css():设置或返回元素的css样式。
1 添加Class
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css">
.red{
color : red;
}
.paragraph{
font-weight: bold;
font-size: xx-large;
}
</style>
</head>
<body>
<div class="demo">
<p id="p1">一些内容</p>
<p id="p2">另一个文本</p>
</div> <button id="btn1">添加Class</button>
</body>
{{--js--}}
<script>
$(document).ready(function() {
$("#btn1").click(function () {
$("#p1,#p2").addClass("red paragraph");
});
});
</script>
</html>
2 删除Class
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css">
.red{
color : red;
}
.paragraph{
font-weight: bold;
font-size: xx-large;
}
</style>
</head>
<body>
<div class="demo">
<p id="p1" class="red paragraph">一些内容</p>
<p id="p2" class="red paragraph">另一个文本</p>
</div> <button id="btn1">删除Class</button>
</body>
{{--js--}}
<script>
$(document).ready(function() {
$("#btn1").click(function () {
$("#p1,#p2").removeClass("red paragraph");
});
});
</script>
</html>
3 切换Class
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css">
.red{
color : red;
}
.paragraph{
font-weight: bold;
font-size: xx-large;
}
</style>
</head>
<body>
<div class="demo">
<p id="p1" class="red paragraph">一些内容</p>
<p id="p2" class="red paragraph">另一个文本</p>
</div> <button id="btn1">切换Class</button>
</body>
{{--js--}}
<script>
$(document).ready(function() {
$("#btn1").click(function () {
$("#p1,#p2").toggleClass("red paragraph");
});
});
</script>
</html>
4 设置或返回CSS
4.1 返回CSS
返回一个css 我们只需要在css方法中写出要获取的css类型就好。
$(document).ready(function() {
$("#btn1").click(function () {
alert($("#p1").css("background-color"));
});
});
4.2 设置CSS
我们可以设置一个或多个css样式:
<script>
$(document).ready(function() {
$("#btn1").click(function () {
$("#p1").css("background-color", "black");
$("#p2").css({"background-color": "black", "color": "white"});
});
});
</script>
jQery 操作CSS的更多相关文章
- jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- JQuery:JQuery操作CSS类
JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...
- JS操作css的float属性的特殊写法
使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.sty ...
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- js操作css样式,null和undefined的区别?
1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
随机推荐
- loadrunner参数使用总结
使用loadrunner进行性能测试,在准备脚本阶段参数是不可避免要使用到的,现把参数的各种设置取值方式总结一下,方便日后查阅: update value on Sequential顺序取值下的取值结 ...
- 【微信小程序】转载:微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下 ...
- std::vector<char> 转 const char
std::stringstream oss; for(unsigned int i=0;i < buffer->size();i++){ oss<<(*buffer)[i]; ...
- IDEA启动服务慢的问题处理
问题描述: 微服务模式下统一启动服务,很慢如下图: 这种情况是IDEA工作环境有问题. 解决方法: 从SVN或者Git重新检出项目,即可解决.
- @@identity、scope_identity()、IDENT_CURRENT('tablename')函数的区别
@@IDENTITY 和SCOPE_IDENTITY 返回在当前会话中的任何表内所生成的最后一个标识值.但是,SCOPE_IDENTITY 只返回插入到当前作用域中的值:@@IDENTITY 不受限于 ...
- clone和lambda的一个小问题和解决
起因是这样,某管理器类有两个集合,A集合是模板集合,B集合是从模板中实例出的集合. 但是B集合的一些东西,总会调用A集合中的,导致出错. 一开始考虑clone使用不当,但检查后没发现什么问题,后来发现 ...
- atitit.基于 Commons CLI 的命令行原理与 开发
atitit.基于 Commons CLI 的命令行原理与 开发 1. 命令行支持的格式有以下几种: 1 2. json化,map化的命令行参数内部表示 1 3. Ati cli 2 4. CLI库 ...
- IOS使用Charts
近期项目中要做图表功能,为了降低开发量採用的是H5+ECharts来做.这里说一下IOS中怎样使用ECharts以及遇到的问题. 网络模块化单文件引入 <!DOCTYPE html> &l ...
- Java遍历包中所有类
PackageUtil 类 import java.io.File; import java.net.URL; import java.net.URLClassLoader; import java. ...
- 使用淘宝 NPM 镜像
http://www.runoob.com/nodejs/nodejs-npm.html ************************************** 大家都知道国内直接使用 npm ...