javascript 操作DOM元素样式

javascript访问元素样式的两种方式

1. 点语法: dom.style.color
2. 中括号: dom.style[color]

// 相同点:
// 1. 只能获取行内样式,不能获取内嵌和外部样式
// 2. 获取的是带单位的字符串 如: 100px

// 不同点:
// 点语法只能获取固定的属性而且不能动态传参,中括号可以
var h = 'height';
box.style.h = '100px';
// 以上代码是错误的: 只能 box.style.height = '100px';

var h = 'height';
box.style[h] = '100px';
// 以上代码是可以的

javascript访问非行内样式

由于点语法和中括号 只能获取行内样式,如果需要获取非行内样式就必须使用以下方式

• IE 和 Opera

// ele 元素节点
ele.currentStyle

• 其他遵循 w3c 标准浏览器

window.getComputedStyle("元素", "伪类");
// 两个参数都是必须的,如果没有伪类用 null 代替

• 兼容写法

/**
  * 兼容所有浏览器,获取元素的style属性
  * @param obj  需要获取样式的元素
  * @param attr 需要获取的属性
  * @returns {string} 返回获取属性
  */
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }else {
        return window.getComputedStyle(obj, null)[attr];
    }
}