|
|
|
示例 2 : 删除class 示例 3 : 切换class 示例 4 : css函数 示例 5 : 比较可运行项目，快速定位问题
通过addClass() 增加一个样式中的class
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").addClass("pink");
});
});
</script>
<button id="b1">增加背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d">
Hello JQuery
</div>
通过removeClass() 删除一个样式中的class
<script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").removeClass("pink");
});
});
</script>
<button id="b1">删除背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d" class="pink">
Hello JQuery
</div>
通过toggleClass() 切换一个样式中的class
这里的切换，指得是： 如果存在就删除 如果不存在，就添加 <script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").toggleClass("pink");
});
});
</script>
<button id="b1">切换背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d" >
Hello JQuery
</div>
通过css函数 直接设置样式
css(property,value) 第一个参数是样式属性，第二个参数是样式值 css({p1:v1,p2:v2}) 参数是 {} 包含的属性值对。 属性值对之间用 逗号，分割 属性值之间用 冒号 ：分割 属性和值都需要用引号 “ <script src="https://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d1").css("background-color","pink");
});
$("#b2").click(function(){
$("#d2").css({"background-color":"pink","color":"green"});
});
});
</script>
<button id="b1">设置单一样式</button>
<button id="b2">设置多种样式</button>
<br>
<br>
<div id="d1" >
单一样式，只设置背景色
</div>
<div id="d2" >
多种样式，不仅设置背景色，还设置字体颜色
</div>
跟着做了，但是还是有问题，跑不起来。
原有主要有二： 1. 自己做了改动，因为对项目还不熟悉，这些改动导致项目跑不起来。 2. 以为自己没做改动，其实还是做了改动，这个时常发生。 为了解决这个问题，站长特意把当前的可运行项目放在了右上角下载， 这样通过比较，就可以快速定位问题所在，大大地提高学习效率。 推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。 这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来 这里提供了绿色安装和使用教程：diffmerge 下载和使用教程
问答区域
2020-10-21
这有什么实际用途呢？直接用CSS不想吗？
2019-08-05
toggleClass失效
2 个答案
哥是菜鸟 跳转到问题位置 答案时间：2021-01-24 你应该发源码上来
markHelloWorld 跳转到问题位置 答案时间：2020-03-01 toggleClass是指对要处理的class生效,不是已经存在的任意一个class.例如:
$("#d").toggleClass("pink");
要是#d这里已经有pink了就会删除,没有就会添加.建议在toggleClass后没生效的话在浏览器中打个断电看一下,可能是颜色被覆盖了.
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2019-07-18
怎样删除css里新设置的样式呢？
2018-11-23
d2里的css函数就是JSON?
2017-09-27
两种加样式的方法冲突吗
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
