<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>06-操作元素的样式</title>
<style type="text/css">
div {
padding: 8px;
180px;
}
.blue {
background: blue;
}
.large {
font-size: 40px;
}
.green {
background: green;
}
.pink {
background-color: 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>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var cla = $('#conBlue').attr('class');
console.log(cla);
$('#conBlue').attr('class','green');
$('#conBlue').addClass('pink');
//css() 添加具体的样式
$('#conBlue').css('font-size','40px');
$('#conBlue').css({'font-family':'楷体','color':'green'});
//移除样式
$('#conBlue').removeClass('larger');
</script>
<!--
操作元素的样式
attr('class') 获取元素的class属性值
attr('class','属性值') 设置元素的样式(覆盖原本样式)
addClass('样式名') 添加样式（原来的样式基础上增加样式，原本的样式会保留，如果出现相同的样式，则以后定义的样式为准）
css() 添加具体的样式（添加行内样式）
css('具体样式名','样式值') 设置单个样式
css({'具体样式名':'样式值','具体样式名':'样式值'}) 设置多个样式
removeClass('样式名') 移除样式
-->
</html>