首页 > 其他 > 详细

jq动态控制样式的一些方法(批量控制样式,带参数控制样式)

时间:2017-02-24 11:02:37      阅读:175      评论:0      收藏:0      [点我收藏+]

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‘

jq动态控制样式的一些方法(批量控制样式,带参数控制样式)

原文:http://www.cnblogs.com/haley168/p/jqStyle.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!