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属性,跟实际项目是不符. ...
随机推荐
- HBase ProcedureV2 分析
Procedure V2, 是hbase1.1版本引入的一套fault-tolerant的执行multi-steps-job的框架, 目前主要用在Master中, 比如创建表,删除表等操作 新旧比较 ...
- classloader常见问题总结
h tp://yourenyouyu2008.iteye.com/blog/779707看到一些ClassNoFindException ,ClassCastException等异常首先应该想到是不是 ...
- 【转载】C#根据当前时间获取周,月,季度,年度等时间段的起止时间
DateTime dt = DateTime.Now; //当前时间 DateTime startWeek = dt.AddDays(1 - Convert.ToInt32(dt.DayOfWeek. ...
- python selenium --层级定位
转自:http://www.cnblogs.com/fnng/p/3193955.html 场景: 假如两个控件,他们长的一模样,还都叫“张三”,唯一的不同是一个在北京,一个在上海,那我们就可以通过, ...
- sklearn word2vec 实践
源代码: https://blog.csdn.net/github_38705794/article/details/75452729 一.复现时报错: Traceback (most recent ...
- centos 安装cmake 3.3.2
先卸掉本身自带的 cmake 2.8 yum remove cmake cmake版本:3.3.2 安装编译源码所需的工具和库 yum install gcc gcc-c++ ncurses-deve ...
- laravel配置文件(自定义配置文件)
laravel配置文件存放目录config里面的文件是自定加载的,也就是说,你在文件夹里面新建一个custom.php,按配置格式写,是可以正常访问的. 1.读取配置的方法: $value = con ...
- Laravel 项目开发规范
参考:https://fsdhub.com/books/laravel-specification
- applicationCache
<html manifest="/m.appcache"> window.applicationCache.onupdateready = function (e) { ...
- 三款免费的PHP加速器:APC、eAccelerator、XCache比较
前几天给 Nova 的缓存系统添加了 Memcache 支持.但是这玩意儿对个人博客系统来说可能不太合适(哪天 XKLog 推出多用户版本了可能会派上用场),事实上,就我自己试用而言,单机情况下使用 ...