GetAttribute 获取属性值

简介

获取节点对象的某个属性以及属性值是JavaScript开发中常见的操作,原生js的某些方法并不能通用,比如通过dom.style并不能获取节点对象的真正样式属性(事实上只有节点对象写上style="width:100px"才可以),我们需要有统一的方法去获取节点对象的所有样式属性值。

axStyle

该函数可获取某节点对象的某属性值,返回节点元素的style对象。

完整写法:axStyle(elem, pseudo),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象。
  • pseudo:选填项,可以是":before"、":after"或null。如果想获得节点元素的伪类属性值可以填写。

举例:axStyle('#demo').fontSize,该例子是获取#demo节点的font-size属性值。

axOffset

该函数可获取距离body的上偏移量和左偏移量。

完整写法:axOffset(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象

举例:axOffset('#demo').left,该例子可获取#demo节点元素距离body的左偏移量;另外还有axOffset('#demo').top

axWidth

该函数可获得节点元素的真实占用宽度。

完整写法:axWidth(elem, type),可简写axWidth(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象。
  • type:可选项,可选择inner或outer,默认是inner。如果是inner则除了width还包含padding-left和padding-right;如果是outer则再包含border-width、margin-left和margin-right。

举例:axWidth('#demo', 'outer'),该例子返回#demo节点“width + padding-left + padding-right + border-width + margin-left + margin-right”的值。

axHeight

该函数可获得节点元素的真实占用宽度。

完整写法:axHeight(elem, type),可简写axHeight(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象。
  • type:可选项,可选择inner或outer,默认是inner。如果是inner则除了height还包含padding-top和padding-bottom;如果是outer则再包含border-width、margin-top和margin-bottom。

举例:axHeight('#demo', 'outer'),该例子返回#demo节点“height + padding-top + padding-bottom + border-width + margin-top + margin-bottom”的值。

axArrHeight

该函数可获得节点元素导致形成高度的构成部分。

完整写法:axArrHeight(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象,elem必须是ul节点对象

举例:axArrHeight('#demo').height,该例子放回#demo节点的height值,其他的还有paddingTop、paddingBottom、marginTop、marginBottom、borderTop、borderBottom