zoukankan      html  css  js  c++  java
  • Jquery操作样式

      1.CSS(name,value)

      修改单个样式

     $(function(){
              $(".divcontent").css("background","red");   //修改背景颜色为红色
            });

      2.CSS({}); 

      修改多个样式

      

     $(function(){
              $(".divcontent").css({
                  //边框 1像素实线 红色
                  border:"1px solid red",
                  //背景颜色绿色
                  background:"green"
              });
            });

      3.Css(name);

      获取样式

      $(function(){
              //返回rgb(0,0,0);
              console.log($(".divcontent").css("background"));
            });

      获取已设置的样式或默认的样式,如果是给多个“li”设置的样式,则返回第一个li元素的样式

      

    $(function(){
              $("li:first").css("fontSzie","16px");
              $("li").eq(1).css("fontSize","24px");
              $("li").eq(2).css("fontSize","44px");
              console.log($("li").css("fontSize"));            //返回16px
            });

    隐士迭代:偷偷的for循环

      设置的时候:会给JQ内部所有的对象都设置相同的值

      获取的时候:只会返回第一个元素对应的值

      4.class操作:

        4.1添加类:addClass("类名");               //类型不需要加.

        在原有的基础上添加类,不覆盖任何类

        4.2移除类:removeClass("类名");

        4.3判断类:hasClass("类名");

        4.4切换类:toggleClass("类名");

            <script>
                //记住  click()里面是方法  加上function
                //添加类
              $("#p").click(function(){
                  $("ul").addClass("boot");
              });
              //移除类
              $("input").eq(1).click(function(){
                  $("ul").removeClass("boot");
              });
              //判断类
              $("input").eq(2).click(function(){
                var a=$("ul").hasClass("boot");
                    if(a){
                        $("ul").removeClass("boot");
                    }else{
                        $("ul").addClass("boot");
                    }
              });
             
    
             //切换类
              $("input").eq(3).click(function(){
                  $("ul").toggleClass("boot");
                  
                  
              });
              
            </script>

      

  • 相关阅读:
    python 文件 笔记
    python 模块、包 笔记
    类、对象
    python 函数 笔记
    测试价值体现
    断舍离-笔记2
    Happy 2006 POJ
    Triangle War POJ
    Complete the sequence! POJ
    放苹果 POJ
  • 原文地址:https://www.cnblogs.com/xiaowie/p/10643037.html
Copyright © 2011-2022 走看看