29 jQuery——操作元素样式
jQuery操作元素样式
操作单样式
元素对象.css(content),例如：
a.css("width","200px") 注意格式，且只能单个添加
操作多样式
注意分号不需加双引号
a.css({"width":"200px",
"height":"200px"
})
添加类样式
a.addClass("类样式名") //注意双引号
删除类样式
a.removeClass("类样式名")
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作元素样式</title>
<style>
#showdiv{
width: 300px;
height: 300px;
border:1px solid
}
</style>
<script type="text/javascript" src="js/jQuery-3.4.1.js"></script>
<style type="text/css">
.common{
background-color: purple;
}
</style>
<script type="text/javascript">
//操作样式---css()
function testCss(){
//获取元素对象
var showdiv = $("#showdiv");
//操作样式--修改/增加 单样式
showdiv.css("background-color","orange");
//操作样式--获取
alert(showdiv.css("width"));
}
function testCss2(){
//获取元素对象
var div = $("#div01");
//操作样式--多样式json方式:本质是写在标签的style属性里（最高优先级）
div.css({
"border":"solid 2px",
"width":"200px","height":"200px",
// "background-color":"red"
});
}
//jquery 操作样式 ---addClass():给元素追加一个已写好的类样式(类选择器的样式)
function testAddClass(){
var div = $("#div01");
div.addClass("common");
}
//jQuery---removeClass()：给元素删除一个类样式
function testRemoveClass(){
var div = $("#div01");
div.removeClass("common");
}
</script>
</head>
<body>
<h3>操作元素样式</h3>
<p>请按顺序点按钮</p>
<input type="button" name="" id="" value="测试修改样式1--css()单样式" onclick="testCss()"/>
<input type="button" name="" id="" value="测试修改样式2--css()--json多样式" onclick="testCss2()"/>
<input type="button" name="" id="" value="追加类样式--addClass()" onclick="testAddClass()"/>
<input type="button" name="" id="" value="删除类样式--css()" onclick="testRemoveClass()"/>
<hr>
<div id="showdiv">
</div>
<div id="div01"></div>
</body>
</html>
