css样式
width
$(“div”).css(“width”,50);
$(“div”).css(“width”,“50px”);
$(“div”).css(“width”,“50”);
(
"
d
i
v
"
)
.
c
s
s
(
"
w
i
d
t
h
"
,
f
u
n
c
t
i
o
n
(
i
n
d
e
x
,
i
t
e
m
)
r
e
t
u
r
n
(
i
n
d
e
x
+
1
)
∗
50
;
)
不
但
可
以
获
取
行
内
样
式
的
值
,
也
可
以
获
取
c
s
s
设
置
的
计
算
后
样
式
c
o
n
s
o
l
e
.
l
o
g
(
("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(
(
"
.
d
i
v
2
"
)
.
s
c
r
o
l
l
T
o
p
(
)
)
;
c
o
n
s
o
l
e
.
l
o
g
(
(".div2").scrollTop()); console.log(
(".div2").scrollTop());console.log((".div2").scrollTop(1000));
获取和设置滚动条位置