Jquery系列-Jquery操作样式

最新推荐文章于 2022-03-01 08:33:54 发布

原创最新推荐文章于 2022-03-01 08:33:54 发布 · 914 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery 专栏收录该内容

20 篇文章

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题页</title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
	

	$(function(){
		$('#btnAdd').click(function(){
		//add class 会进行重复性判断
			$('.class1').addClass("class2");
		
		});

		$('#btn_remove').click(function(){
		//add class 会进行重复性判断
			$('.class1').removeClass("class2");
		
		});


		$('#btn_toggle').click(function(){
		//add class 会进行重复性判断
			$('.class1').toggleClass("class2");
		
		});

		

		$('#btn_off').click(function(){
		//开关样式(有则remove无则add)
			$(document.body).toggleClass("night");
		
		});
	});

	
</script>	
<style type="text/css">
	/*filter IE支持*/
	body{filter:gray;}
	.class1{background:red;}
	.class2{font-size:50px;}
	
	.night{background:black;}
	
</style>
</head>
<body>

<div class="class1">您好</div>
<input type="button" value=add id="btnAdd"/>
<input type="button" value=remove id="btn_remove"/>
<input type="button" value=toggle id="btn_toggle"/>


<input type="button" value=on/off id="btn_off"/>
</body>
</html>