美文网首页
jQuery(三)_设置CSS

jQuery(三)_设置CSS

作者: learninginto | 来源:发表于2019-12-10 21:05 被阅读0次

jQuery(三)_设置CSS

  • 获取css样式

    相当于js中计算后的样式

    getComputedStyle(box).width;

    box.currentStyle.width;

    $(".box").css("width");
    $(".box").css(["width","100px"]);
    //获取多个CSS样式,返回对象 
    
  • 设置div样式

    $("div").width(100);
    $("div").innerWidth(100);
    
    $("box1").offset({left:100,top:100});
    //设置到页面顶端距离位置
    
    方法名 描述
    innerWidth() width+padding
    innerHeight() height+padding
    outerWidth() width+padding+border
    outerHeight() height+padding+border
    outerWidth(true) width+padding+margin+border
    outerHeight(true) height+padding+margin+border
  • 设置div多个样式

    $("div").css({
        width:100,
        height:100,
        backgroundColor:"red"
    });
    $("div").css(["width","100px"])
    
  • 为多个div设置样式

    $("div").css("width",function(index){
        return 50 * (index + 1) + "px";
    })
    
  • 为div设置多个class样式

    $("div").addClass("box1");
    $("div").addClass("box1 box2");
    $("div").removeClass("box1");
    
  • 切换样式

    $(this).assClass("div1");
    $("box").hover(function(){
      $(this).addClass("div2");
    },function(){
      $(this).removeClass("div2");
    })
    
    $("div").addClass("div1").click(function () {
        $(this).toggleClass("div2");//开关切换
        $(this).toggleClass("div2", true);//仅切换一次
        $(this).toggleClass("div2", false);//不切换
    })
    

相关文章

网友评论

      本文标题:jQuery(三)_设置CSS

      本文链接:https://www.haomeiwen.com/subject/vgcngctx.html