06-JQuery学习之操作元素的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>06-操作元素的样式</title>
		<style type="text/css">
			div {
				padding: 8px;
				width: 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>
06-JQuery学习之操作元素的样式

推荐阅读
