问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

无法获取js动态创建的元素的高度？

头像
新一代英雄
    401910

    我用两种方式创建div
    1.种是用 document.createElement('div');
    console.log($('div').height())有高度
    2.种是用 $(body).html('<div></div>')
    console.log($('div').height())没有高度
    是不是前者刷新了dom树，后者没有刷新dom树

    javascript
    阅读 9.9k
    3 个回答
    得票最新
    头像
    dhuhank
      24021115

      你的第一种方法没有把div添加到DOM里，例如$('body')appendChild(document.createElement('div'))
      因此个人认为，console.log($('div').height())取到的不是你刚创建的元素，而是你之前就有的元素。
      所以有高度。
      图片描述

      图片描述

      头像
      kikong
        19.1k31320

        你看下是不是你写的代码有问题
        把代码贴出来看看
        我这边测试是OK的
        query append操作会将元素添加到当前DOM书上，渲染引擎在发现DOM有变化就会渲染页面（局部的或全局的）

        <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../script/jquery-2.1.3.min.js"></script>
    <script>
        $(function(){
            $('body').append('<div>123</div>');
            console.log($('div').height());//有输出结果 18

        });

    </script>
</head>
<body>
</body>
</html>
        头像
        dctxf
          15717

          经过测试，两种方法都可以获得元素高度。具体代码如下，你可以对照下看看

          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="jquery.js"></script>
<script>
    window.onload = function(){
        /*var div = document.createElement('div');
            document.body.appendChild(div);
        console.log($('div').height());*/

        $('body').html('<div></div>');
        console.log($('div').height());
    };
</script>
</html>

          以上代码输出高度都为0

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题