防止忘记fagetComputedStyle,createNodeIterator,pointe-event

返回值

getComputedStyle 返回的对象是 CSSStyleDeclaration 类型的对象。取数据的时候可以直接按照属性的取法去取数据,例如 style.backgroundColor。需要注意的是,返回的对象的键名是 css 的驼峰式写法,background-color -> backgroundColor。

需要注意的是 float 属性,根据 《JavaScript 高级程序》所描述的情况 ,float 是 JS 的保留关键字。根据 DOM2 级的规范,取元素的 float 的时候应该使用 cssFloat。其实 chrome 和 Firefox 是支持 float 属性的,也就是说可以直接使用。

和 style 的异同

getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象,取相应属性值得时候都是采用的 CSS 驼峰式写法,均需要注意 float 属性。

而不同点就是:

element.style 读取的只是元素的内联样式,即写在元素的 style 属性上的样式;而 getComputedStyle 读取的样式是最终样式,包括了内联样式、嵌入样式和外部样式。
element.style 既支持读也支持写,我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式,通过 element.style 修改样式

image.png

createNodeIterator 节点遍历

const body = document.getElementsByTagName('body')[0]
const it = document.createNodeIterator(body)
let root = it.nextNode()
while(root) {
    console.log(root)
    root = it.nextNode()
}

pointe-event:none; 类似disabled

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

推荐阅读更多精彩内容

  • 本文引自张鑫旭的博客,但是因为太唠叨了,所以算是节选吧。 getComputedStyle() getComput...
    K891V阅读 10,169评论 0 2
  • HTML元素的style属性 操作 CSS 样式最简单的方法,就是使用网页元素节点的getAttribute方法、...
    oWSQo阅读 281评论 0 1
  • 第一部分:接口介绍 首先说在HTML中定义样式的方式有 3 种: 通过 link 元素包含外部样式表文件 使用 s...
    侠客有情剑无情QAQ阅读 754评论 0 5
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,355评论 0 3
  • getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象(...
    静_c540阅读 268评论 0 0