关于dom元素style对象的误区

首先要认识一点: dom元素的style对象和dom元素的css样式表两者是独立的,没有任何关系.
譬如我在css中给元素设置一个color属性,访问node.style.color, 会显示空字符串.
我之前一直把这两者混为一谈了.
看例子:

 <div style="color: aqua;line-height: 24px" class="demo">
    <p>hello world</p>
  </div>
  .demo {
    background-color: bisque;
    font-size: 16px;
  }
<script>
  var node = document.querySelector('.demo')
  console.log(node.style.color) // aqua
  console.log(node.style.backgroundColor) // ''
  console.log(node.style)
  console.log(node.style[0])  // 'color'
  console.log(node.style.cssText)  // 'color: aqua; line-height: 24px;'
  console.log(node.style.fontSize) // ''
</script>

比较有意思的是node.style[0],赋值过的内联样式可以通过索引来访问key.顺序也是内联样式在前,通过js赋值的样式在后.
兼容性暂时未知.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,445评论 0 44
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 复习: 项目文档:api手册 用markdown编写 不同编程语言的区别 函数式编程:让电脑像人一样思考 指令式编...
    ZGKzm阅读 265评论 0 0
  • 有时候身边的人总会很善意地“教你做人”,虽然他们知道在你身上发生的事情终将还是会由你自己决定,但就是担心你往后做错...
    鳕零kelsey阅读 283评论 0 0
  • 今日刚得知,一个同事要离职了。这个男生是我在目前为止最认同的男同事,责任心强,特别有礼貌,有素质,胖胖憨憨的,也没...
    禅司大人阅读 200评论 1 0