Javascript 操作 DOM 的一些细节备注(二)

时间:2023-02-13 07:26:53

  11、获取元素的样式值:通常首先想到的会是 elm.style.xxx,但这种方式在面对通过 class 或专门的样式文件等方式引入的样式时,将无法获取到值。这时需要使用下面的方法:

elm.currentStyle // IE
document.defaultView.getComputedStyle(elm, str) // 第二个参数是表示 CSS 伪对象的字符串,如 :after
注意,取到的样式值在各种浏览器中可能会有不同的表现形式,尤其是颜色值。

  12、CSS 定位:position : static| absolute| fixed| relative的区别

    1) static: 这是默认的方式,此时,Top 和 Left 属性无效

    2) absolute:该定位方式是相对于第一个非静态定位的祖先节点,而不是文档节点,只有不存在符合条件的祖先节点时,才会相对于文档节点来定位。

    3) fixed: 将会使元素相对于当前浏览器的可视区域来定位,所以即使拉动滚动条,元素在可视区域内的位置也不会发生变化(想想浮动窗口),可惜 IE6 不支持。

    4) relative:  与 static 定位相似,但 top 和 left 属性会引起元素相对其原始位置进行偏移(正向或反向)。

  13、获取元素的位置:几乎所有的浏览器中元素都会有以下三个属性用于获取元素在页面中的位置:

    1) offsetParent: 元素会基于 offsetParent 指向的元素来进行定位。据说 opera 中,offsetParent 直接指向当前元素的父元素。但在 IE、Firefox 和 Chrome 中,offsetParent 会指向第一个非静态定位的祖先节点,若没有符合条件的祖先节点,则为 Body。

    2) offsetLeft 和 offsetTop: 元素相对 offsetParent 的偏移值。

  14、获取元素的宽度和高度:elm.offsetWidth、elm.offsetHeight。对于 display:none 的元素,这两个属性获取的值都为 0,这时,若指定了元素的 width 和 height 样式,则直接通过样式获取,若未指定,则可以先显示元素,获取值后再隐藏元素。

  15、元素尺寸位置的说明:这一直是个挺麻烦的事,用文字很难说清楚,找到一幅 IE 下的示意图,凑合着看下吧。Javascript 操作 DOM 的一些细节备注(二)