增加css样式--详细版

最新推荐文章于 2024-04-12 10:21:35 发布

烧了回忆取暖

最新推荐文章于 2024-04-12 10:21:35 发布

阅读量424

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/kanuoyuan/article/details/37761299

版权

jQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>增加css样式</title>
<script type="text/javascript" src="class library/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
	$('#head').mouseover(function(){
		$('#content').addClass('f_style');
	}).mouseout(function(){
		$('#content').removeClass('f_style');
	});
});
</script>
<style>
#head{
	width:500px;
	height:30px;
	margin:0 auto;
	text-align:center;
	}
#content{
	color:blue;
	font-size:20px;
	border:1px solid #ccc;
	width:500px;
	height:300px;
	margin:0 auto;
	}
.f_style{
	font-weight:bold;
	line-height:200%;
	}
</style>
</head>

<body>
<p id="head">请点我</p>
<div id="content">
1,首先把jQuery导入.
2,然后开始写函数了。$(document).ready(function(){});
3,获取标签能直接 $("标签")。给标签注册onclick事件直接可以 click.
4,核心代码: 
$("#head").click(function(){$(".content").addClass("c_style");});
5,功能:通过单击id为control的元素改变id为box元素的样式 
知识点:addClass()添加样式 
</div>
</body>
</html>