标签：jQuery color 元素 CSS highlight myclass addClass css 属性
本篇博客的主要内容是：操作页面元素的CSS属性；以及将定义好的类应用到页面元素上去；
目录
三：css()方法；addClass()方法；removeClass()方法；
1：css("color","red");：设置某元素的CSS属性
3：css({"color":"red","font-weight":"bold","font-style":"italic"});：设置多个CSS属性
4：addClass("highlight");：给元素添加定义的类
5：addClass("highlight myclass");：给元素添加多个定义的类
6： removeClass("myclass");：移除元素的类
一：概述：
二：准备工作：
基础代码：sample2.html：
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作CSS属性</title>
<style>
.myclass {
font-style: italic;
color: darkblue;
}
/* 高亮css类 */
.highlight {
color: red;
font-size: 30px;
background: lightblue;
}
</style>
</head>
<body>
<div class="section">
<h2>jQuery选择器实验室</h2>
<input style="height: 24px" id="txtSelector" />
<button id="btnSelect" style="height: 30px">选择</button>
<hr />
<div>
<p id="welcome">欢迎来到选择器实验室</p>
<ul>
<li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
style="color: darkgreen" href="http://www.so.com">360</a>
</span>
</li>
<li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
</span>
</li>
<li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
<a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
</span>
</li>
</ul>
<span>新加测试span标签</span>
<p>你好</p>
<span class="myclass ">我是拥有myclass类的span标签</span>
<p class="myclass">我是拥有myclass的p标签</p>
<form id="info" action="#" method="get">
<div>
用户名：<input type="text" name="uname" value="admin" /> 密码：<input
type="password" name="upsd" value="123456" />
</div>
<div>
婚姻状况： <select id="marital_status">
<option value="1">未婚</option>
<option value="2">已婚</option>
<option value="3">离异</option>
<option value="4">丧偶</option>
</select>
</div>
<div class="left clear-left">
<input type="submit" value="提交" /> <input type="reset" value="重置" />
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
<script type="text/javascript">
</script>
</body>
</html>
三：css()方法；addClass()方法；removeClass()方法；
1：css("color","red");：设置某元素的CSS属性
css()方法作用：访问或设置前面选择器所选中元素的CSS属性
示例1：需求，将页面所有的超链接的文本变成红色。
利用css()方法，设置超链接元素的文本颜色
<script type="text/javascript">
$("a").css("color","red");
</script>
…………………………
2：css("color")；：获取某元素的属性
示例2：获取某元素的CSS属性
选择器选择多个元素时，其默认获取第一个元素的属性：
<script type="text/javascript">
var color_attr = $("a").css("color");
alert(color_attr);
</script>
…………………………
3：css({"color":"red","font-weight":"bold","font-style":"italic"});：设置多个CSS属性
设置多个CSS属性的时候，
示例3：需求：将超链接文字设为红色，字体加粗、斜体；按照上述内容，恐怕要写三个css()方法；
简便处理方法：在css()方法中，传递一个JSON对象：
<script type="text/javascript">
$("a").css({"color":"red","font-weight":"bold","font-style":"italic"});
</script>
…………………………
4：addClass("highlight");：给元素添加定义的类
示例4：需求：
<script type="text/javascript">
$("li").addClass("highlight");
</script>
…………………………
5：addClass("highlight myclass");：给元素添加多个定义的类
添加多个类？
addClass()：多个类之间用空格分隔即可
<script type="text/javascript">
$("li").addClass("highlight myclass");
</script>
经过实测，当myclass类和highlight类都设置了某个属性，并且产生冲突时：
$("li").addClass("myclass highlight");和$("li").addClass("highlight myclass");没有什么不同；真正哪个其作用，和<style>中类的定义顺序有关：
………………………………
移除类：
…………………………
6： removeClass("myclass");：移除元素的类
<script type="text/javascript">
$("p").removeClass("myclass");
</script>移除p元素上面的myclass类：
经过实测：移除多了类：removeClass("myclass highlight");
<script type="text/javascript">
$("li").addClass("myclass highlight");
$("li").removeClass("myclass highlight");
</script>疑问：<style>中定义的类，需要遵从那些规范，谁来规定具体定义那些类，这个还有点不清楚？？？
标签：jQuery,color,元素,CSS,highlight,myclass,addClass,css,属性 来源： https://blog.csdn.net/csucsgoat/article/details/112733812
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。