js进阶 11-3 jquery中css属性如何操作

时间：2023-03-09 04:03:45
js进阶 11-3 jquery中css属性如何操作

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属性操作

  1. 获取CSS属性值:$().css("属性")
  2. 设置单个CSS属性:$().css("属性","属性值")
  3. 设置多个CSS属性:$().css({"属性1":"属性值1","属性2":"属性值2",……})

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

     </style>

 </style>

 </head>

 <body>

     <img src="HTML5.png" alt="" width="100" border="2">

     <img src="HTML5.png" alt="" width="100" border="2">

     <img src="HTML5.png" alt="" width="100" border="2">

     <input type="button" id="btn1" value="获取">

     <input type="button" id="btn2" value="设置1">

     <input type="button" id="btn3" value="设置2">

     <input type="button" id="btn4" value="删除">

     <script>

         $(function(){

             //获取元素的属性值

             $('#btn1').click(function(){

                 //alert($('img').attr('width'))

                  alert($('img').css('width'))

             })

             $('#btn2').click(function(){

                 //设置单个CSS属性

                 //$('img').css('width','200')

                 //设置多个CSS属性

                 $('img').css({

                     'border':'solid 5px green',

                     'opacity':'0.5'

                 })

             })

             $('#btn3').click(function(){

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

                     alert(parseInt(value))

                     return parseInt(value) *(index+1)/3+'px'

                 })

             })

             $('#btn4').click(function(){

                 $('img').removeAttr('border width')

             })

         })

     </script>

 </body>

 </html>

相关文章