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>