jQuery的css样式

css样式

width

$(“div”).css(“width”,50);
$(“div”).css(“width”,“50px”);
$(“div”).css(“width”,“50”);
$("div").css("width",function(index,item)return(index+1)\ast 50;)不但可以获取行内样式的值，也可以获取css设置的计算后样式console.log($(“div”).css(“width”));

同时设置多个属性

$(“div”).css({
width:50,
height:50,
backgroundColor:“red”,
border:“1px solid #000000”
})

多个属性设置不同的值

 $("div").css({
    width:function(index,item){
        return (index+1)*50;
    },
    height:function(index,item){
        return (index+1)*50;
    },
    backgroundColor:function(index,item){
        var color="#";
        for(var i=0;i<6;i++){
            color+=Math.floor(Math.random()*16).toString(16);
        }
        return color;
    },
    border:"1px solid #000000"
});

获取元素的指定样式

获取第一个元素的指定样式值，返回一个对象
console.log($(“div”).css([“width”,“height”,“backgroundColor”]));

添加删除class名

$(“div”).addClass(“div1”);
$(“div”).addClass(“div1 div2”);

$(“div”).removeClass(“div1”);
$(“div”).removeClass(“div1 div2”);

根据bool值来回切换class名
var bool=false;
$(“div”).on(“click”,function(){
bool=!bool;
if(bool) $(this).removeClass(“div1”).addClass(“div2”);
else $(this).removeClass(“div2”).addClass(“div1”);
})

添加和移除div2之间来回切换
$(“div”).on(“click”,function(){
$(this).toggleClass(“div2”);
})

各种类型的宽

console.log($(“div”).width()); 内容宽度width
$(“div”).width(100).height(100);
$(“div”).width(function(index,item){
return (index+1)*50;
})

console.log($(“div”).innerWidth()); width+padding
$(“div”).innerWidth(100);

console.log($(“div”).outerWidth()); offsetWidth,width+padding+border
$(“div”).outerWidth(100);

console.log($(“div”).outerWidth(true)); width+padding+border+margin
只能获取不能设置

console.log($(".div3").offset());//元素相对页面左上角的位置
$(".div3").offset({left:500,top:500});

console.log($(".div3").position());//得到的是定位位置，等同于offsetLeft，offsetTop
不能设置

console.log($(".div2").scrollTop());console.log($(".div2").scrollTop(1000));
获取和设置滚动条位置