jQuery css方法操作

最新推荐文章于 2024-08-16 17:20:49 发布

YOUAFR

最新推荐文章于 2024-08-16 17:20:49 发布

阅读量248

点赞数

分类专栏： day04(jQuery)

本文链接：https://blog.csdn.net/YOUAFR/article/details/78345658

版权

day04(jQuery) 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<style type="text/css">
			#box{width: 100px;height: 100px;/*background: red;*/}
			.class{background: lavender;}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//单一	只设置一种样式
		$('#box').css('border','1px solid red');
		//多种 用json方法存放添加
		$('#box').css({height:'200px',width:'200px',border:'10px solid black'})
		//获取样式值
		var boxwidth = $('#box').css('width');
		//alert(boxwidth);
		
		//1.移入div事件 添加clss样式 等级比css样式的低
		$('#box').on('mouseover',function(){
			// 给div添加class的类选择样式
			$(this).addClass('class');
		});
		$('#box').on('mouseout',function(){
			// 只移除指定名称的样式
			$(this).removeClass('class');
			
			//这个没有加类名 代表移除全部的类的样式
			//$('#box').removeClass();
		});
		
		// hasClass(类样式名称)	判断是否有使用类样式，有返回true
		console.log('是否有使用box的类样式'+$('.box').hasClass('box'));
		console.log('是否有使用xob的类样式'+$('.box').hasClass('xob'));
		
		// toggleClass		如果没有指定类样式就添加类样式，如果有就把指定类样式给移除
		$('.box2').on('mouseover', function(){
			$(this).toggleClass('color');
		});
	</script>