兼容及DOM解释差异笔记——待续

1.offsetLeft以及offsetTop:

　　1.1 offsetLeft ：只读，当前元素到定位父级的距离，也就是当前元素的offsetParent的距离

　　1.2 offtsetLeft与offsetParent区别：

　　　　在没有定位父级的情况下：

　　　　　　offsetParent 默认定位父级为body，offtsetLeft 默认定位父级为html

　　　　在有定位父级的情况下：

　　　　　　ie7及以下：如果自身没有设置定位，offtsetLeft 是到body的距离，如果有定位的情况下则就是定位到父级的距离

　　　　　　其他浏览器：到定位父级的距离

 

2.style.width-------样式宽 （带px单位）

　clientWidth-------样式宽 + padding，为可视区宽（不带px单位）

　offsetWidth------占位宽，样式宽 + padding + border （不带px单位）

3.获取元素到页面顶级的距离

　　这里利用offsetParent

function getPos(obj){
  
  var p = { left : 0, top : 0 };
  while (obj){

    p.left += obj.offsetLeft;
    p.top += obj.offsetTop;
    obj = obj.offsetParent; //obj的定位父级对象    

  }
/*
    保存每一个当前对象到上一个父级定位对象的距离累加到p.left和p.top
    每保存一次就将当前obj替换为原obj的父级定位对象。
    知道最后顶层定位对象为body时，body的父级定位对象会为null，跳出循环    
*/
}
var a = getPos(document.getElementById("div1"));//这样使用
alert(a.left)

4.操作元素属性

　　4.1 使用 . 获取或设置，如一个 input.value;

　　4.2 使用[] , 如 elmObj['value'];

　　4.3 elm.getAttribute(属性名),这是获取指定元素的指定属性值的方法。elm.setAttribute(属性名,属性值),设置指定元素指定属性名的值的方法。elm.removeAttribute(属性名)，移除指定属性

　　4.4 注意，非标准浏览器使用4.1和4.2的方法无法操作元素的自定义属性（ie8及以下可以）。4.3中的操作方法中没有这个局限

　　4.5 getAttribute（）方法可以获取元素属性实际的值，如图片的src属性，如果使用4.1或者4.2的方法取出的将会是经过处理过的绝对路径，而getAttribute()则会输出实际的src值（ie7及以下仍会返回经过处理的绝对路径）

　　4.6 IE系列浏览器下有这么一种方法:elm.style.getAttribute(),其他浏览器没有，一般不会这么使用（用来判断是否ie系列浏览器？）

5.动态创建img时ie8及以下无法使用img.width 设置图片大小，是因为ie8及以下要注意先设置img.src再设置大小