首页 > Web开发 > 详细

复习练习(03)jquery Css方法一步步升级

时间:2016-05-15 18:12:16      阅读:244      评论:0      收藏:0      [点我收藏+]

jquery Css方法一步步升级 

 <script src="jquery-1.8.3.js"></script>

  <script type="text/javascript">
        //css 方法 一步步升级
        //1.css 
       /* $(function () {
            $("input").click(function() {
                $(".shang").css("font-size", "22px");
                $(".shang").css("background-color", "red");
                $(".shang").css("border", "#000 5px solid");
                $(".shang").css("opacity", "0.5");
            });


        });
        */

        //2.css
       /* $(function () {
            $("input").click(function () {
                $(".shang").css("font-size", "22px").css("background-color", "red").css("border", "#000 5px solid").css("opacity", "0.5");
            });


        });
        */

        //3.css
        /* $(function () {
            $("input").click(function () {
                var s =
                {
                    "font-size": "22px",
                    "background-color": "red",
                    "border": "#000 5px solid",
                    "opacity": "0.5"
                }
                $(".shang").css(s);
            });
        });
        */
        //4.css
        $(function () {
            $("input").click(function () {
              
                $(".shang").css({
                    "font-size": "22px",
                    "background-color": "red",
                    "border": "#000 5px solid",
                    "opacity": "0.5"
                });
            });
        });
 


//5.css
      $(function () {
         $("input").click(function ()

              {

               $(".shang").css({width: function (index, value){ return ((index * 50) + 100) + "px"; },

                          "height": "100px",

                         "background-color": "red"

                       });

                });
      });


</script> </head> <body> <input type="button" value="dianji"/> <div id="shang" class="shang">dddds <ul> <li>fasl</li> <li> sssss<span> span hong1</span></li> <li> sssss<span> span hong2</span></li> </ul> </div> </body>

 

复习练习(03)jquery Css方法一步步升级

原文:http://www.cnblogs.com/laopo/p/5495533.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!