jq动态控制样式的一些方法(批量控制样式,带参数控制样式)
1.带变量的操作方法
注意:如border等具有多个参数时,需要拼接字符串,并且需要拼接单位,如果没有单位将不起作用
<div class="box box1">
<ul>
<li class="haley1"><p><span><b>我是红色文字</b></span></p></li>
<li class="haley2"><p><span><u>我是文字</u></span></p></li>
<li class="haley3">我是应该带10px的边框,上下padding为10,左右padding为20</li>
<li class="haley4">我是文字</li>
</ul>
<script>
var w=10;
var pt=10;
var pl=20;
var color='#f00';
$('.haley3').css({
'border':w+"px solid #f00",
'padding':pt+'px '+pl+'px'
});
$('.box').find('ul>.haley1 b').css({
'color':color
});
</script>
</div>
<style>
.box{
width:600px;
height:300px;
background: #46b8da;
padding:20px;
}
.box1{
}
</style>
2.批量操作样式
注意:使用群组选择器,each遍历操作
<div class="box box2"> <ul> <li class="haley1"><p><span><b>我是文字</b></span></p></li> <li class="haley2"><p> <span> <u>我是绿色文字</u> <b>我是文字</b> </span> </p></li> </ul> <div class="child">我应该是绿色的文字</div> <ol> <li><span>我也应该是绿色的文字</span></li> <li><b>我也应该是默认颜色</b></li> </ol> <script> $.each([$('.box2').find('ul>.haley2 u'), $('.child'), $('ol>li>span')], function () { $(this).css({ 'color': 'green' }); }) </script> <style> .box{ width:600px; height:300px; background: #46b8da; padding:20px; } </style> </div>
3.需要拼接单位的几种情况
<div> <div class="box box3"> <p>多年来,我一直在跟扶贫打交道,其实我就是从贫困窝子里走出来的。1969年初,我到延安农村插队当农民,还不到16岁。从北京一下子到那么穷的一个地方,感受确实很深。晚上黑灯瞎火,沿着那条沟亮着几盏煤油灯,真是“一灯如豆”。如果外出没有手电筒,深一脚浅一脚的,搞不好就掉沟里了。那里土地很薄,没有什么肥,粪是挑上去的,都是点种,真是广种薄收啊。刚开始的时候,我工分才能评六分五。两三年后,我什么都学会了,成农村壮劳力了,才能拿10分。那时候,挑100多斤的担子,走10里山路,一点问题没有。这10个工分,也就值八九分钱。算下来,出一天工,买不了一盒羊群烟(上世纪70年代,宝鸡卷烟厂生产的一种最便宜的香烟),当时一盒羊群烟九分钱。</p> </div> <script> var h=20; $('.box3').children('p').css({ 'height':h, 'line-height':h,//<----- 不会自动自动加px,会认为是em 'text-indent':h,//自动加px 'margin-left':h,//自动加px 'letter-spacing':h,//自动加px 'font-size':h,//自动加px 'padding-left':h//自动加px }); </script> <style> .box3>p{ border:1px solid #c1e2b3; } </style> </div>
1)带变量拼接字符串的时候 'padding':pt+'px '+pl+'px'
2) line-height
3) 不用px,需要用其他单位时 'top':20+'%' ,'font-size':2+'rem'
4.几种常见的错误写法
4.1 children不能串联选择器,如果串联选择用find
代替方法【弊端符合条件的都会被选中】
$('.box1').find('>ul>li').css({
'color':'red'
});
haley欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!