jQuery操作元素的样式
jQuery操作元素的样式
1、attr操作class
attr(“class”) 获取元素的样式名
attr(“class”,“属性值”) 设置元素的样式值（原有的会被覆盖）
2、css()操作样式
添加元素的具体样式添加的样式会在style标签当中
css(“样式名”,“样式值”) 设定某一个具体样式
css({“样式名1”:“样式值1”,“样式名2”:“样式值2”…}) 设置多个具体样式
addClass(“class名称”) 添加元素的样式名（在原有的基础之上添加新的样式，原本样式会保留，如果出现同样的样式名以后定义的为主）
3、removeClass()移除样式
removeClass(“class名称”) 移除元素的样式名
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作元素的样式</title><style type="text/css">div{padding: 8px;width: 180px;}.blue{background: blue;}.larger{font-size: 30px;}.green {background : green;}.pink {background : pink;}</style></head><body><h3>css()方法设置元素样式</h3><div id="conBlue" class="blue larger">天蓝色</div><div id="conRed">大红色</div><div id="remove" class="blue larger">天蓝色</div></body><!-- 操作元素的样式1、attr操作classattr("class") 获取元素的样式名attr("class","属性值") 设置元素的样式值（原有的会被覆盖）2、css()操作样式添加元素的具体样式添加的样式会在style标签当中css("样式名","样式值") 设定某一个具体样式css({"样式名1":"样式值1","样式名2":"样式值2"......}) 设置多个具体样式addClass("class名称") 添加元素的样式名（在原有的基础之上添加新的样式，原本样式会保留，如果出现同样的样式名以后定义的为主）3、removeClass()移除样式removeClass("class名称") 移除元素的样式名--><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// attr操作样式// 获取样式名console.log("==========attr操作样式==========");var conBlue=$("#conBlue").attr("class");console.log(conBlue);// $("#conBlue").attr("class","green");//将id=conBlue的class值设置为green// console.log("==========css()操作样式==========");// // 为元素添加样式，自动为元素添加style属性并将设置的属性添加到style内// $("#conRed").css("color","red");//为id=conRed添加css样式字体为红色// $("#conRed").css({"font-size":"25px","font-family":"楷体"});//为id=conRed添加css样式字体大小25px;字体为楷体// $("#conBlue").addClass("pink");//为id=conBlue添加样式为pink的样式表// console.log("==========removeClass()操作样式==========");//$("#remove").removeClass("blue");//移除id=remove的class=blue的样式</script>
</html>运行结果（浏览器鼠标右键选择：查看元素/检查或者直接按F12：选择查看器/elements进行查看）：
代码：
$("#conBlue").attr("class","green");//将id=conBlue的class值设置为green
运行之前浏览器中的代码：
运行之后浏览器中的代码：
代码：
$("#conRed").css("color","red");//为id=conRed添加css样式字体为红色
运行之前浏览器中的代码：
运行之后浏览器中的代码：
代码：
$("#conRed").css({"font-size":"25px","font-family":"楷体"});//为id=conRed添加css样式字体大小25px;字体为楷体
运行之前浏览器中的代码：
运行之后浏览器中的代码：
代码：
$("#conBlue").addClass("pink");//为id=conBlue添加样式为pink的样式表
运行之前浏览器中的代码：
运行之后浏览器中的代码：
代码：
$("#remove").removeClass("blue");//移除id=remove的class=blue的样式
运行之前浏览器中的代码：
运行之后浏览器中的代码：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！