jQuery宽width、高height

jQuery宽width、高height

<div></div>
<div></div>
<div></div>
<div></div>

// 设置jQuery对象列表中，每个元素宽高100像素
$("div").width(100).height("100px");

// 设置jQuery对象列表中，每个元素不同宽度
$("div").width(function(index,item){
    return 50*(index+1);
})
// 设置jQuery对象列表中，每个元素高50像素,设置红色背景色
$("div").height("50px").css("backgroundColor","red");

// 将jQuery列表中第一个元素的宽度返回数值
console.log($("div").width());// number
console.log($("div").css("width"));// string
// 鼠标滑过元素宽度增加
$("div").on("mousemove",function(){
    $(this).width($(this).width()+10)
})

// 获取元素宽度(width+padding)
console.log($("div").innerWidth());
$("div").innerWidth(100);// 和上面相同

// 获取元素宽度(width+padding+border)
console.log($("div").outerWidth());
$("div").outerWidth(100);// 和上面写法相同

//width+padding+border+margin
console.log($("div").outerWidth(true));