15-4设置元素的类样式

慷睛溅卸勘鞋需琳洗点室藐囊

原始结构：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>4.设置元素类样式</title>
		<style type="text/css">
			.circle
			{
				border-radius: 50%;
			}
			.shadow
			{
				box-shadow: 2px 2px 2px #888;
			}
		</style>
	</head>
	<body>
		<img src="../images/zly.jpg" width="200" id="pic" />
	</body>
</html>

执行：

15-4设置元素的类样式第1张

设置元素样式的方法
1.通过设置标签的class属性,来指定要应用的类样式规则
2.直接设置标签的style属性,来对当前元素进行样式重置

1.应用类样式:addClass()

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').addClass('circle')
	$('#pic').addClass('shadow')
	
</script>

执行：

15-4设置元素的类样式第2张

同时添加两个类样式：

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').addClass('circle shadow')
</script>

执行:

15-4设置元素的类样式第2张

2.移除类样式:removeClass()

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').addClass('circle shadow')
	$('#pic').removeClass('circle')
	$('#pic').removeClass('shadow')
	
	
</script>

执行：

15-4设置元素的类样式第4张

同时移除两个类样式：

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').addClass('circle shadow')
	$('#pic').removeClass('circle shadow')
</script>

执行：

15-4设置元素的类样式第4张

3.样式自动切换:toogleClass()
如果当前元素没有添加类样式,那么自动添加上它指定的类样式

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').addClass('circle shadow')
	$('#pic').toggleClass('circle shadow')
</script>

执行，因为当前类有circle和shadow样式，所以会移除这两个样式

15-4设置元素的类样式第4张

如果当前元素已经被添加上类样式,那么它就会移除掉这个类样式
先给元素添加上类样式

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').toggleClass('circle shadow')
</script>

执行，当前没有这两个类样式，添加类样式

15-4设置元素的类样式第7张

4.查询类样式: hasClass()

检查是否存在该样式

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('#pic').addClass('circle shadow')
	var res = $('#pic').hasClass('circle shadow')
	console.log(res)
</script>

执行：

15-4设置元素的类样式第8张

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	var res = $('#pic').hasClass('circle shadow')
	console.log(res)
</script>

执行：

15-4设置元素的类样式第9张

如果有类样式，移除，如果没有则添加类样式

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">

	if ($('#pic').hasClass('circle shadow')) 
	{
		$('#pic').removeClass('circle shadow')
	} 
	else 
	{
		$('#pic').addClass('circle shadow') 
	}
	console.log(res)
</script>

执行：

15-4设置元素的类样式第10张

挂牛颗溯插埂琳雹汤虚媳携坡