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)∗50;)不但可以获取行内样式的值，也可以获取css设置的计算后样式console.log((\”div\”).css(\”width\”,function(index,item){return (index+1)*50;})不但可以获取行内样式的值，也可以获取css设置的计算后样式console.log((\”div\”).css(\”width\”,function(index,item)return(index+1)∗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());console.log((\”.div2\”).scrollTop());console.log((\”.div2\”).scrollTop(1000));
获取和设置滚动条位置