JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)

例子:可以直接用var pL=$('.id').css('padding-left');来获得padding-left的值,截取px后就可以使用了。


var pL=$('.id').css('padding-left').split('px')[0];//获取到padding-left的数值

console.log('padding-left的值是:'+ pL+'px');



由于直接获取padding得到的会是四个值,处理起来麻烦,所以建议用padding-left、margin-left、border-left、等等的

以下转载文章--------------------------------------------------------------------------------------------------------------------------------------------------

一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding、Border 与  Margin 的宽度,四个加起来才是 div 真正占有的宽度。

JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)全都有了!

var content = $(‘div’). width();//只是获取content宽度

var contentWithPadding = $(‘div’). innerWidth();//获取content+padding的宽度

var withoutMargin = $(‘div’). outerWidth();//获取content+padding+border的宽度

var full = $(‘div’). outerWidth(true);//获取content+padding+border+margin的宽度


宽度与高度概念一样,只差水平与垂直向而已。


Margin 有个特色,就是当两个有 margin的 div 靠在一起时,两个 div 紧邻的 margin 不是相加,而是取其大者,举例来说,两个 10px margin 的 div 并在一起只会有 10px margin 的距离,若是一个 20px margin,另一个为 10px margin,则会有 20px 的 margin。

但是获取当前元素的全部宽度的时候,还是获取自身的margin+content+padding+border的值。

文章出处:http://blog.csdn.net/zy1281539626/article/details/61913770

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值