获取元素坐标,与元素的宽度

function getOffset(select){
var li=$(select);
var ul=$('.main1_r .tempWrap');
var ulwd=ul.width();
var lioff=li.offset();
var uloff=ul.offset();
 
var chwd=li.find('div').outerWidth(true);
if(lioff.left-uloff.left > ulwd/3){
li.find('div').css({left:-chwd});
}
}
$('.main_yishi .yishi li').hover(function(){
getOffset($(this));
})
 
jq的  offset() 方法获取相对于 文档(document) 的坐标,坐标以元素的 左上角 为基准,结果为left,top的集合通过.top,.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的值。

posted on 2017-09-26 14:56  suchen07  阅读(152)  评论(0)    收藏  举报