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>

转载于:https://www.cnblogs.com/sun-kang/p/7551573.html

jQery 操作CSS相关推荐

jQuery 样式操作||操作 css 方法/设置类样式方法
操作 css 方法 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 <strong>//1.获取和设置样式</strong> $("#tow").attr("class&q ...
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...
原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...
jQuery操作CSS常见问题
1.jquery操作css !important无效解决: 这种写法:$('#oDiv').css({"width":"100px", "color ...
jQuery的操作css的几种方法和位置，尺寸以及scrolltop方法
jQuery操作css jQuery可以通过css方法直接给指定元素查看,更改,添加css样式 <script>$(function () {//jQuery可以通过css方法直接给指定元 ...
【jQuery学习】—jQuery操作CSS和表格
[jQuery学习]-jQuery操作CSS和表格一.jQuery操作CSS 二.jQuery操作表格
【JavaLearn】（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
目录 1. jQuery定义和特点 1.1 jQuery 入门 1.2 jQuery对象和DOM对象 2. jQuery 选择器 2.1 基本选择器 2.2 属性选择器 2.3 位置选择器 2.4 表 ...
【JavaLearn】#（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
1. jQuery定义和特点 1.1 jQuery 入门对 JavaScript 进行了封装,降低了使用JavaScript的难度,可以大幅提高开发效率(Write less, do more) j ...

jQery 操作CSS

1 添加Class

2 删除Class

3 切换Class

4 设置或返回CSS

4.1 返回CSS

4.2 设置CSS

jQery 操作CSS相关推荐

最新文章

热门文章