所有元素产生偏移一的参照物是文档(浏览器的左上角)

会产生偏移量的属性:标准流(就是盒子上下排列),float,margin,position的absolute或rellative

定位是在margin外面开始定位的

offsetLeft/offsetTop 左偏移和上偏移

offsetHeight/offsetWidth 内容的宽/高+padding+border

clientWidth/clientHeight 可见内容的宽/高+padding

scrollTop/scrollleft 上卷去的内容/左卷曲的内容

scrollWidth/scrollHeight 内容的实际宽/高

jq里的:

$(oDiv).width();//内容的宽

$(oDiv).innerWidth();//clientWidth

$(oDiv).outerWidth();//不加双边距的offsetWidth;

$(oDiv).outerWidth(true);//双边距+offsetWidth;

offsetLeft=绝对定位的值+margin(记得margin的值初始化)

经常会把需要把offsetLeft转化为绝对定位。记得margin的值初始化

/*********把offsetLeft转化为绝对定位**********/

oDiv.style.left=oDiv.offsetLeft+"px";

oDiv.style.margin=0;

oDiv.style.position="absolue"

offsetParent就是产生偏移的参照物,在默认的文档流下,所有的元素的offsetParent是文档(document页面){body代理},

当这个元素的祖先元素写了绝对定位,则以这个祖先元素为offsetParent

/*************得到偏移量的方法****************/

function getPositon(ele){
var l=ele.offsetLft;
var t=ele.offseTop
while(offSetParent){
var ele=ele.offsetParent;
if(window.navigator.userAgent.indexOf('MSIE 8')>-1){
l+=offSetParent.offsetLeft;
t+=offSetParent.offsetTop;
}else{
l+=ele.offsetLeft+ele.clientLeft;
t+=ele.offsetTop+ele.clientTop;
}
}
return {left:l,top:t
}

ie7下currentStyle不规范,是因为他们采取的是浏览器给的默认值,解决方法:把这些标签需要计算的默认值初始化

/*************获得样式第一种************/
function getCss(ele,attr){
if(typeof getComputedStyle=="function"){
return getComputedStyle(ele,null)[attr]
}else{
return ele.currentStyle[attr];
}
}


/*************第二种方法*****************/
function getCss(ele,attr){
try{
return getComputedStyle(ele,null)[attr]
} catch(e){
return ele.currentStyle[attr];
}
}

////////////////////第三种获得样式/////////////////////
function getCss(ele,attr){
if(window getComputedStyle){//window,因为这个变量在ie6/7/8里没有,一个变量如果未定义,不能直接操作(读),但是,一个变量没有声明,可以用typeof去判断,如果是属性没有读限制
return getComputedStyle(ele,null)[attr]
}else{
return ele.currentStyle[attr];
}
}

优质内容筛选与推荐>>
1、第三课,T语言数据类型(版本TC5.0)
2、聊一聊log4j2配置文件log4j2.xml
3、组合数据类型练习,英文词频统计实例上
4、VB C# 在线互译 .net code converter
5、Android 核心分析 之七Service深入分析


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号