codeErr_getComputedStyle无法立即获取createElement创造的元素的属性

错误代码

    <div id="div"></div>
    <script>
        var imgEle = document.createElement(‘img‘);
        imgEle.src = "../318bb51754058e0b9d9e8c6455d146f2.jpg";
        imgEle.id = ‘img‘;
        var $div = document.getElementById(‘div‘);
        $div.appendChild(imgEle);
        console.log(getComputedStyle(imgEle));//CSSStyleDeclaration
        console.log(getComputedStyle(document.getElementById(‘img‘)).width);//0
        console.log(getComputedStyle(imgEle).width);//0

如上代码所示：通过js代码在html中创建了一个img标签，并给其赋值了图片地址。但是无法通过getComputedStyle立即获取图片的宽高。

给代码添加异步处理

        var imgEle = document.createElement(‘img‘);
        imgEle.src = "../318bb51754058e0b9d9e8c6455d146f2.jpg";
        imgEle.id = ‘img‘;
        var $div = document.getElementById(‘div‘);
        $div.appendChild(imgEle);
        setTimeout(() => {
            console.log(getComputedStyle(imgEle));
            console.log(getComputedStyle(document.getElementById(‘img‘)).width);//1920px
            console.log(getComputedStyle(imgEle).width);//1920px
        },100);

即因为添加的img标签渲染需要时间，无法立即通过访问文档获得其属性。

修改代码

    选择文件： <input type="file" name="file1" id="file1"><br>
    <input type="button" value="读取" onclick="show()">
    <div id="result"></div>
    <script>
        function readFile() {
            var p1 = new Promise((resolve, reject) => {
                var reader = new FileReader();
                var file1 = document.getElementById(‘file1‘).files[0];

                if (/image\/\w+/.test(file1.type)) {
                    reader.readAsDataURL(file1);
                    reader.onload = event => {
                        resolve(reader.result);
                    }
                } else {
                    reject(‘该文件不是图片文件‘);
                }
            });
            return p1;
        }

        function show() {
            readFile().then(
                data => {
                    new Promise((resolve, reject) => {
                        var imgEle = document.createElement(‘img‘);
                        imgEle.src = data;
                        imgEle.id = ‘newCreateImg‘;
                        document.getElementById(‘result‘).appendChild(imgEle);
                        resolve(imgEle);
                    }).then(
                        data => {
                            console.log(getComputedStyle(data).width);
                            console.log(getComputedStyle(data).height);
                        }
                    )


                },
                reason => {
                    var pEle = document.createElement(‘p‘);
                    pEle.innerText = reason;
                    document.getElementById(‘result‘).appendChild(pEle);
                }
            )
        }

通过promise异步处理，创建标签完成后再调用resolve传递对象获取属性。

codeErr_getComputedStyle无法立即获取createElement创造的元素的属性

原文：https://www.cnblogs.com/Syinho/p/13311189.html