jq 给div设置宽_jQuery 获取与设置div的宽高

jQuery获取与设置div的宽高的方法有两种:

1. 使用尺寸函数

2. 使用css方法

获取宽高

1. 尺寸函数:

height() 获取高度,width() 获取宽度

2. css获取div宽高:

css("height")获取高度,css("width")获取宽度

区别:尺寸函数获取的值为整型,而css获取的值为带px的字符串

$(".divClass").click(function() {

// 使用width() height()方法来获取宽高 返回的是整形数字

var divWidth = $(this).width();

var divHeight = $(this).height();

// 使用css方法获取宽高 返回的是带px的字符串

var divWidth = $(this).css("width");

var divHeight = $(this).css("height");

alert("div宽:" + divWidth + ";div高:" + divHeight);

});

两种方法弹出的值分别为:

div宽:100;div高:100

div宽:100px;div高:100px

设置宽高

第一种方法:使用尺寸函数设置

div.height(100);

div.width(100);

第二种方法:使用css函数设置

div.css({"width":"10px","height":"10px"}); //使用css设置多个属性时,放在大括号中属性间用逗号分隔

div.css("width","10px"); //使用css设置单个属性时,将属性名称与属性值使用逗号分隔(不需要放到大括号中)

第三种方法:使用animate设置

//使用animate与css的方法不同之处在于:animate参数的属性名称不需要用引号包起来

div.animate({width:"100px",height:"100px"}, 1000);

$("#update").click(function() {

var divWidth = $("#width").val();

var divHeight = $("#height").val();

// 1. 使用width() height()方法来设置div宽高

$(".div").width(divWidth).height(divHeight);

// 2. 使用css的方式来设置宽高

$(".div").css({"width":divWidth+"px", "height":divHeight+"px"});

// 3. 使用函数链的方式写代码

// 注:使用css设置单个样式时,参数为css("width", divWidth+"px") 逗号分割

$(".div").css("width", divWidth+"px").css("height", divHeight+"px");

// 4. 使用不同函数的函数链

$(".div").css("width", divWidth+"px").height(divHeight);

// 5.animate()动画 宽高一块改变

$(".div").animate({width:divWidth+"px", height:divHeight+"px"}, 4000);

// 6.animate()动画 先改变宽,再改变高

$(".div").animate({width:divWidth+"px"}, 4000).animate({height:divHeight+"px"}, 4000);

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值