jQuery CSS样式和class

jQuery css样式和class

<div class="divs"></div>
<div class="divs"></div>
<div class="divs"></div>
<div class="divs"></div>

// 设置jQuery对象列表中div宽度50px
$("div").css("width",50);
$("div").css("width","50px");// 两种写法相同

// 设置不同宽度
$("div").css("width",function(index,item){
    return 50*(index+1);
})

// 设置不同高度，颜色随机
$("div").css({
    width:50,
    height:function(i){
        return (i+1)*50;
    },
    backgroundColor:function(){
        return "#"+Math.floor(Math.random()*0x1000000).toString(16).padStart(6,"0");
        // return "#"+Array(6).fill(Math.floor(Math.random()*16).toString(16)).join("")
    }  
})

// 获取元素的第一个css属性值
console.log($("div").css("height"));

// 新建一个空数组
// 将jQuery对象列表中的高度添加到数组中
var arr=[];
$("div").css("height",function(index,item){
    arr.push(item);
})
// 打印数组
console.log(arr);
// 获取列表中指定下标的元素高度
console.log($("div").eq(2).css("height"));

// 在css中填入数组要获取的css样式，就可以获取到了
console.log($("div").css(["width","height","backgroundColor"]));

var arr=[];
$("div").each(function(){
    // 有多少个元素数组里面添加多少个对象
    arr.push({});
}).css({
    width:function(index,item){
        arr[index].width=item;
    },
    height:function(index,item){
        arr[index].height=item;
    },
    backgroundColor:function(index,item){
        arr[index].backgroundColor=item;
    }
})
console.log(arr);

var div=document.querySelector("div");
console.log(getComputedStyle(div).width);
// 这个css样式获取，不但可以获取行内样式，还可以获取css计算后样式，而且兼容
console.log($("div").css("width"));

class样式

// 添加class类名
$("div").addClass("div1");
$("div").addClass("div1 div2");
// 删除class类名
$("div").removeClass("div1");
$("div").removeClass("div1 div2");

// jQuery对象列表div添加添加事件
$("div").on("click",function(){
    // this就是点击的div
    var div=$(this);
    div.prop("bool",function(index,item){
        // 如果item是true就添加class类名div1，否则就删除
        if(item) div.addClass("div1");
        else div.removeClass("div1");
        return !item;
    })
})

切换class样式

// 切换class样式
$("div").on("click",function(){
    $(this).toggleClass("div1");
})

$("div").on("click",function(){
    $(this).toggleClass("div1",true);//只能切换一次
})

$("div").on("click",function(){
    $(this).toggleClass("div1",false);//不能切换
})