JavaScript使用createElement创建一个li,后如何检测到已经插入到真实dom,并计算li的宽度

hping
  • 483

js通过createElement创建一个li,想要计算这个li的宽度,但是没插入页面之前计算宽度是0,插入页面之后就能计算出li的真实宽度


class Tab{
    constructor(){
        const tab = document.createElement("ul")
        const li = document.createElement("li")
        tab.appendChild(li)
        li.textContent = "test"
        // 1、这个时候如果获取li的宽度(li.offsetWidth),是0
        // 如何在tab插入真实dom上后再去计算 li.offsetWidth?
        return tab
    }
}

const tab = new Tab()
const root = document.getElementById('root')
root.appendChild(tab)
// 2、这个时候再去计算 li的offsetWidth 就不是0
// li 在render到页面后会不会触发什么事件,通过监听这个事件来获取呢?
评论
阅读 649
4 个回答

因为在插入之前,各种样式属性都没有应用上,浏览器并不知道你里边的内容该以怎样的方式来呈现。
插入到文档中以后,才会被浏览器渲染出来,进而计算出盒模型相关的属性。

从你代码来看, 在构造函数中是获取不到li的宽度的,因为在构造函数中 你只做了把li插入到ul中 而ul并没有插入到DOM中,故 li也就没有插入到DOM中 所以你获取不到,考虑换个思路 实现你的需求。

看起来你需要 MutationObserver,它能够侦听 DOM 结构的变化,调用函数处理。

有个监听事件 貌似叫 DOMNodeInserted 可以挂在 li 上面,然后呢,在插入的时候,就可以获取到了

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏