JQueryDOM之样式操作
更新时间：2019年03月27日 09:51:14 作者：cc小马哥
这篇文章主要介绍了JQueryDOM之样式操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
设置样式和获取样式
class 也是节点元素的属性，因此获取class 和设置class 都可以使用attr()方法来完成
追加样式
直接使用attr()方法设置class属性，会将原来的class属性替换掉
如果在添加新的样式时，还需要保留原有样式，可以使用addClass()方法
注意：当一个节点元素包含了多个class样式时，将按照以下方式进行处理：
- 如果给一个元素添加了多个 class 值， 那么就相当于合并了它们的样式
- 如果有不同的 class 设定了同一样式属性， 则后者覆盖前者
移除样式
如果要删除class某个值，可以使用removeClass()方法完成，它的作用是从匹配的元素中删除全部或者指定的class
不传递参数时，删除所有；给定参数时只删除指定的class
判断是否含有某个样式
hasClass()方法可以用来判断元素中是否包含某个class，如果有则返回true，否则返回false
案例源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM样式操作</title>
<script src="../js/jquery-3.1.1.js"></script>
<script>
//
$(function(){
// 给id为p2的元素添加一个样式p_content
$("#btn1").click(function(){
$("#p2").attr("class","p_content");
});
// 追加样式
$("#btn2").click(function(){
$("#p1").addClass("p_bg");
});
// 移除样式
$("#btn3").click(function(){
// 如果removeClass里面不写参数的话。就是移除全部样式
$("#p1").removeClass("p_bg");
$("#p2").addClass("p_bg").removeClass("p_content");
});
// 判断样式
$("#btn4").click(function(){
alert($("#p2").hasClass("p_content"));
});
})
</script>
<style>
.p_content {
color: red;
font-size: 15px;
}
.p_bg {
background-color: red;
color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p id="p1" class="p_content">你最喜欢的水果?</p>
<ul>
<li title="苹果">苹果</li>
<li title="桔子">桔子</li>
<li title="香蕉">香蕉</li>
</ul>
<p id="p2">你最喜欢的运动是？</p>
<ul>
<li>游泳</li>
<li>篮球</li>
<li>足球</li>
</ul>
<button id="btn1">设置和获取样式</button>
<button id="btn2">追加样式</button><br /><br />
<button id="btn3">移除样式</button>
<button id="btn4">判断样式</button><br /><br />
</body>
</html>
以上所述是小编给大家介绍的JQueryDOM之样式操作详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了javascript的push使用指南,需要的朋友可以参考下2014-12-12
本文主要讲解了JavaScript中BOM和DOM，BOM为浏览器对象模型，DOM 为文档对象模型，两者之间有很大的区别，感兴趣的小伙伴可以阅读一下这篇文章，了解相关内容2021-08-08
前几天学习了JavaScript，但是一直由于忙碌的原因，没有来得及进行总结，今天终于有时间进行一个全面总结了，希望给正在努力学习的朋友们一点小小帮助。2009-11-11
php与js的区别包括：类型转换的不同、实形参的不同、数据类型的不同等等，更多参考下文，希望对大家有所帮助2013-08-08
这篇文章主要介绍了javascript实现playfair和hill密码算法,需要的朋友可以参考下2014-12-12
个人总结的一些关于String、Function、Array的属性和用法
个人总结的一些关于String、Function、Array的属性和用法...2007-01-01
De facto standard 世界上不可思议的事实标准
前些天IEBlog中提到实现互通并不是只靠标准就行，其中举出了一些关于事实上的标准的考虑——所谓“事实上的标准”，也就是并非标准，但大家都遵循着它去做事情的那么一种东西。2010-08-08
Javascript模块化编程(三)require.js的用法及功能介绍
这个系列的第一部分和第二部分，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。我采用的是一个非常流行的库require.js感兴趣的朋友可以了解下啊2013-01-01
继承的封装貌似在每个语言中都有，在本文为大家详细介绍下，JavaScript的继承的封装，感兴趣的朋友不要错过2013-10-10
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一是JSON实际上就是JavaScript。它基于ECMAScript第3版中JavaScript对象字面量语法子集的一种文本格式。2014-10-10
最新评论