Jquery系列-Jquery操作样式

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

jackson_fighting

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

阅读量834

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/SDN_SUPERUSER/article/details/13434561

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<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>

jackson_fighting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery系列-Jquery操作样式

无标题页 $(function(){ $('#btnAdd').click(function(){ //add class 会进行重复性判断,已经添加过的样式不再添加 $('.class1').addClass("class2"); }); $('#btn_remove').click(function(){ $('.class1').remo
复制链接

扫一扫