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

最新推荐文章于 2025-09-10 19:44:49 发布

原创最新推荐文章于 2025-09-10 19:44:49 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细解析了网页元素的定位属性（offsetLeft, offsetTop）、元素的宽高（width, clientWidth, offsetWidth, height）以及如何通过多种方式操作元素属性。包括获取属性值、设置属性值和移除属性等基本操作，覆盖了不同浏览器环境下的兼容性问题。

一、元素位置

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.value
oText['value']


1、元素.getAttribute(属性名称); 方法 获取指定元素的指定属性的值

alert( oText.getAttribute('value') );


2、元素.setAttribute(属性名称，属性值); 方法 给指定元素指定的属性设置值

oText.setAttribute( 'value', 'hello' );


3、元素.removeAttribute(属性名称); 方法 移除指定的元素的指定的属性

oText.removeAttribute( 'value' );