javascript访问元素样式的两种方式
- 点语法: dom.style.color
- 中括号: 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]; }}