js进阶 11-3 jquery中css属性如何操作
一、总结
一句话总结：通过css()方法
1、attr和css是有交叉的，比如width，两者中都可以设置，那么他们的区别是什么？
其实通俗一点就是css范围更广
css是样式中的width，attr是属性中的width。
<img src="HTML5.png" alt="" width="100" border="2">
如果image没有设置width属性，attr中取不到，但是css中可以取到其原始宽度
2、css()方法多属性设置，用什么标点符号表示？
逗号，因为逗号表示多 ，multi
3、编程语言中的逗号表示什么？
多，multy，比如多参数，多属性
4、编程语言中键值对的表示有哪几种方式？
css中冒号，php中的=>和逗号，java中的赋值号=，jquery中的冒号
二、jquery中css属性如何操作
1、相关知识
CSS属性操作
- 获取CSS属性值:$().css("属性")
- 设置单个CSS属性:$().css("属性","属性值")
- 设置多个CSS属性:$().css({"属性1":"属性值1","属性2":"属性值2",……})
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style> 10 </style> 11 </style> 12 </head> 13 <body> 14 <img src="HTML5.png" alt="" width="100" border="2"> 15 <img src="HTML5.png" alt="" width="100" border="2"> 16 <img src="HTML5.png" alt="" width="100" border="2"> 17 <input type="button" id="btn1" value="获取"> 18 <input type="button" id="btn2" value="设置1"> 19 <input type="button" id="btn3" value="设置2"> 20 <input type="button" id="btn4" value="删除"> 21 22 <script> 23 $(function(){ 24 //获取元素的属性值 25 $('#btn1').click(function(){ 26 //alert($('img').attr('width')) 27 alert($('img').css('width')) 28 }) 29 $('#btn2').click(function(){ 30 //设置单个CSS属性 31 //$('img').css('width','200') 32 //设置多个CSS属性 33 $('img').css({ 34 'border':'solid 5px green', 35 'opacity':'0.5' 36 }) 37 }) 38 39 $('#btn3').click(function(){ 40 $('img').css('width',function(index,value){ 41 alert(parseInt(value)) 42 return parseInt(value) *(index+1)/3+'px' 43 }) 44 }) 45 $('#btn4').click(function(){ 46 $('img').removeAttr('border width') 47 }) 48 49 }) 50 </script> 51 </body> 52 </html>