美文网首页
防止忘记fagetComputedStyle,createNod

防止忘记fagetComputedStyle,createNod

作者: 时间_7436 | 来源:发表于2022-01-13 16:13 被阅读0次

    返回值

    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

    相关文章

      网友评论

          本文标题:防止忘记fagetComputedStyle,createNod

          本文链接:https://www.haomeiwen.com/subject/wfwncrtx.html