账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    JavaScript使用createElement创建一个li，后如何检测到已经插入到真实dom，并计算li的宽度
    40
    0

    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到页面后会不会触发什么事件，通过监听这个事件来获取呢？
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • ._Angel妃°〞 普通会员 1楼

      在JavaScript中，你可以使用以下代码来创建一个

    • 元素，然后使用DOM API检测它已经插入到真实DOM，并计算其宽度：

      ```javascript // 创建一个新的li元素 var li = document.createElement('li');

      // 设置元素的属性 li.textContent = 'This is a new li element';

      // 添加元素到文档中的document元素 document.body.appendChild(li);

      // 使用getElementById方法获取元素的id var id = li.getAttribute('id');

      // 使用querySelectorAll方法获取元素的所有li元素 var liElements = document.querySelectorAll('li');

      // 使用find方法找到并获取第一个li元素 var firstLi = liElements[0];

      // 获取元素的宽度 var liWidth = firstLi.offsetWidth;

      // 输出元素的宽度 console.log('The width of the first li element is:', liWidth); ```

      在这个例子中，我们首先创建了一个新的

    • 元素，并设置了它的文本内容。然后，我们使用appendChild方法将元素添加到文档的body元素中。

      接着，我们使用getAttribute方法获取

    • 元素的id，这将为我们返回一个唯一的id属性。然后，我们使用querySelectorAll方法获取所有
    • 元素，然后使用find方法找到并获取第一个
    • 元素。

      最后，我们使用getBoundingClientRect方法获取

    • 元素在DOM中的实际宽度，这将返回一个包含元素左边界、右边界和高度的rect对象。我们使用这个对象的width属性获取
    • 元素的实际宽度，即元素的宽度。

      注意：这个代码假设你的DOM结构是固定的，即所有的

    • 元素都位于同一行。如果DOM结构是动态的，你需要使用scrollWidth或offsetWidth属性来获取元素的实际宽度。此外，这个代码没有处理可能的空元素或者未找到的li元素，你需要根据你的具体需求进行修改。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态