请看这个函数

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

<h3>获取css属性</h3>

    <div class="first">获取颜色</div>

    <p></p>

    <div class="second">获取文字尺寸</div>

    <p></p>

    <div class="third">获取宽高尺寸</div>

<p></p>


<script type="text/javascript">

//background-color:blue; => rgb(0, 0, 255)

//颜色都会转化成统一的rgb标示

$('p:eq(0)').text( $('.first').css("background-color") ) 

    </script>


<script type="text/javascript">

//字体大小都会转化成统px大小 em=>px

$('p:eq(1)').text( $('.first').css("font-size") )

    </script>


<script type="text/javascript">

//获取尺寸,传入CSS属性组成的一个数组

//{width: "60px", height: "60px"}

var value = $('.first').css(['width','height']);

//因为获取的是一个对象,取到对应的值

$('p:eq(2)').text( 'widht:' + value.width +  ' height:' +value.height )

    </script>


</br></br></br>

<h3>设置css属性</h3>

<div class="fourth">设置颜色设置文字尺寸</div>

    <div class="fifth">设置颜色设置文字尺寸</div>

    <div class="sixth">通过回调设置新的值</div>

    <div class="seventh">同时设置多少个样式</div>


<script type="text/javascript">

//多种写法设置颜色

$('.fourth').css("background-color","red")

$('.fifth').css("background-color","yellow")

    </script>


<script type="text/javascript">

//多种写法设置字体大小

$('.fourth').css("font-size","15px")

$('.fifth').css("fontSize","0.9em")

    </script>



<script type="text/javascript">

//获取到指定元素的宽度,在回调返回宽度值

//通过处理这个value,重新设置新的宽度

$('.sixth').css("width",function(index,value){

            value=value.split("px");

            return(Number(value[0]+50)+value[1]);

            }

            )

        

    </script>


<script type="text/javascript">

//合并设置,通过对象传设置多个样式

$('.seventh').?

    </script>



</body>


</html>

这里:

$('.sixth').css("width",function(index,value){

            value=value.split("px");

            return(Number(value[0]+50)+value[1]);

            }

有两个问题:

1:index这个是什么意思呢? 既然是参数,那我换成别的也可以啊。

2:value也是参数,这个参数是不是.sixth内部返回的width值?下面的 value=value.split("px");只是重新给它赋值?

3:求详细解答一下这个函数,谢谢!

朝花bu夕拾
浏览 1423回答 3
3回答

千秋此意

0、$('.sixth')选中一组对象, .css方法会对一组元素进行遍历,1、index是当前元素在一组对象里的索引,你也可以换成别的,比如idx什么的。2、value是当前元素原本的width值(比如 100px),value = value.split('px')即把字符串valut以'px'为标记进行切割,返回一个数组(例:value = 100px;  value.split('px') => ['100', ''];),切割后数组里的各个元素还是字符串。3、所以我感觉上面的那个返回值有问题,先是Number(value[0] + 50) 应该改成 Number(value[0]) + 50,然后是 + value[1],切割后value[1]应该是空字符串,并不是'px',jq里的css方法设置宽高这种样式的时候可以直接传一个数字作为参数,会自动给你补上px,当然也可以自己手动补上,所以这里最后的返回值要么写: return Number(value[0])+50; 要么写: return Number(value[0])+50 + 'px';
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JQuery