<!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:求詳細解答一下這個函數，謝謝！
3 回答
千秋此意
TA貢獻158條經驗 獲得超188個贊
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';
- 3 回答
- 0 關注
- 1466 瀏覽
添加回答
舉報
0/150
提交
取消