开启辅助访问
帐号登录 |立即注册

JS获取DOM元素CSS样式的方法(行内及非行内样式)

 
CSS 样式有两种类型:

1.行内样式:通过元素的 style 属性定义的样式。

2.非行内样式:通过 <style> 标签或引入外部 CSS 文件定义的样式。

针对 DOM 元素的行内样式,可以从 DOM.style 样式集合中读取对应行内样式属性,如:DOM.style.width、DOM.style.height 等。而要获取非行内样式,则需要通过 window.getComputedStyle()(W3C)方法或 DOM.currentStyle(IE)当前样式集合属性去获取。

window.getComputedStyle 用法(W3C):window.getComputedStyle(element, pseudoElement),element 是必需参数,传入要获取样式的元素;pseudoElement 是可选参数,伪类元素,当不查询伪类元素的时候可以忽略或者传入 null。window.getComputedStyle() 方法返回样式集合的对象,读取该对象的属性即可获取到样式。

DOM.currentStyle 用法(IE):DOM.currentStyle[attr],attr 是要获取的样式属性名称。

综上,可以编写出以下函数:

// element 要获取 CSS 样式的 DOM 元素
// attr 要获取的 CSS 样式属性名称
function getStyle(element, attr) {
    if (window.getComputedStyle) { // W3C
        return window.getComputedStyle(element, null)[attr];
    } else if (element.currentStyle) { // 兼容 IE8 及以下浏览器
        return element.currentStyle[attr];
    }
}
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。