JS中级课程第一课（DOM概念、操作）笔记2

一、元素位置

offsetLeft/offsetTop : 只读 属性 当前元素到定位父级的距离（偏移值）==到当前元素的offsetParent的距离

• 如果没有定位父级

offsetParent -> body
offsetLeft -> html

• 如果有定位父级

ie7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离；如果自己有定位，那么就是到定位父级的距离
其他：到定位父级的距离

二、元素宽高

/*        width        style.width : 样式宽        clientWidth : 可视区宽        offsetWidth : 占位宽        height与之类似  */    alert( oDiv.style.width );  //样式宽=100    alert( oDiv.clientWidth );  //样式宽+padding=120    alert( oDiv.offsetWidth );  //样式宽+padding+border=可视区宽+边框=122

三、操作元素属性的多种方式

oText.valueoText['value']1、元素.getAttribute(属性名称); 方法 获取指定元素的指定属性的值alert( oText.getAttribute('value') );2、元素.setAttribute(属性名称，属性值); 方法 给指定元素指定的属性设置值oText.setAttribute( 'value', 'hello' );3、元素.removeAttribute(属性名称); 方法 移除指定的元素的指定的属性oText.removeAttribute( 'value' );

• 用.和[]的形式无法操作元素的自定义属性
  getAttribute可以操作元素的自定义属性
• getAttribute可以获取img元素属性实际的值
  ie7以下以及.和[]还是会返回资源的绝对路径