首頁(yè) 猿問(wèn) 請(qǐng)看這個(gè)函數(shù)

請(qǐng)看這個(gè)函數(shù)

JQuery

朝花bu夕拾 2016-10-19 21:53:29

<!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) //顏色都會(huì)轉(zhuǎn)化成統(tǒng)一的rgb標(biāo)示 $('p:eq(0)').text( $('.first').css("background-color") )? ? ? </script> <script type="text/javascript"> //字體大小都會(huì)轉(zhuǎn)化成統(tǒng)px大小 em=>px $('p:eq(1)').text( $('.first').css("font-size") )? ? </script> <script type="text/javascript"> //獲取尺寸，傳入CSS屬性組成的一個(gè)數(shù)組 //{width: "60px", height: "60px"} var value = $('.first').css(['width','height']); //因?yàn)楂@取的是一個(gè)對(duì)象，取到對(duì)應(yīng)的值 $('p:eq(2)').text( 'widht:' + value.width + ?' height:' +value.height )? ? </script> </br></br></br> <h3>設(shè)置css屬性</h3> <div class="fourth">設(shè)置顏色設(shè)置文字尺寸</div>? ? <div class="fifth">設(shè)置顏色設(shè)置文字尺寸</div>? ? <div class="sixth">通過(guò)回調(diào)設(shè)置新的值</div>? ? <div class="seventh">同時(shí)設(shè)置多少個(gè)樣式</div> <script type="text/javascript"> //多種寫法設(shè)置顏色 $('.fourth').css("background-color","red") $('.fifth').css("background-color","yellow")? ? </script> <script type="text/javascript"> //多種寫法設(shè)置字體大小 $('.fourth').css("font-size","15px") $('.fifth').css("fontSize","0.9em")? ? </script> <script type="text/javascript"> //獲取到指定元素的寬度，在回調(diào)返回寬度值 //通過(guò)處理這個(gè)value，重新設(shè)置新的寬度 $('.sixth').css("width",function(index,value){? ? ? ? ? ? value=value.split("px");? ? ? ? ? ? return(Number(value[0]+50)+value[1]);? ? ? ? ? ? }? ? ? ? ? ? )? ? ? ??? ? </script> <script type="text/javascript"> //合并設(shè)置,通過(guò)對(duì)象傳設(shè)置多個(gè)樣式 $('.seventh').?? ? </script></body></html>這里： $('.sixth').css("width",function(index,value){? ? ? ? ? ? value=value.split("px");? ? ? ? ? ? return(Number(value[0]+50)+value[1]);? ? ? ? ? ? }有兩個(gè)問(wèn)題:1:index這個(gè)是什么意思呢？既然是參數(shù)，那我換成別的也可以啊。2：value也是參數(shù)，這個(gè)參數(shù)是不是.sixth內(nèi)部返回的width值？下面的?value=value.split("px");只是重新給它賦值?3:求詳細(xì)解答一下這個(gè)函數(shù)，謝謝！

查看完整描述

3 回答

千秋此意

TA貢獻(xiàn)158條經(jīng)驗(yàn) 獲得超188個(gè)贊

0、$('.sixth')選中一組對(duì)象， .css方法會(huì)對(duì)一組元素進(jìn)行遍歷，
1、index是當(dāng)前元素在一組對(duì)象里的索引，你也可以換成別的，比如idx什么的。

2、value是當(dāng)前元素原本的width值（比如 100px）,value = value.split('px')即把字符串valut以'px'為標(biāo)記進(jìn)行切割，返回一個(gè)數(shù)組（例：value = 100px;? value.split('px') => ['100', ''];)，切割后數(shù)組里的各個(gè)元素還是字符串。

3、所以我感覺上面的那個(gè)返回值有問(wèn)題，先是Number(value[0] + 50) 應(yīng)該改成 Number(value[0]) + 50，然后是 + value[1]，切割后value[1]應(yīng)該是空字符串，并不是'px'，jq里的css方法設(shè)置寬高這種樣式的時(shí)候可以直接傳一個(gè)數(shù)字作為參數(shù)，會(huì)自動(dòng)給你補(bǔ)上px，當(dāng)然也可以自己手動(dòng)補(bǔ)上，所以這里最后的返回值要么寫: return Number(value[0])+50; 要么寫： return Number(value[0])+50 + 'px';

反對(duì) 回復(fù) 2016-10-19