jQuery css方法操作

来源:互联网 发布:sql 语句写union 编辑:程序博客网 时间:2024/06/11 03:22
<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(类样式名称)判断是否有使用类样式,有返回trueconsole.log('是否有使用box的类样式'+$('.box').hasClass('box'));console.log('是否有使用xob的类样式'+$('.box').hasClass('xob'));// toggleClass如果没有指定类样式就添加类样式,如果有就把指定类样式给移除$('.box2').on('mouseover', function(){$(this).toggleClass('color');});</script>

原创粉丝点击