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

目录

• 错误代码
• 给代码添加异步处理
• 修改代码
• 改写代码：链式调用then方法来改变图片的显示大小
• 再改：使用catch方法传递rejiect的值，与then不同的是resolve传递出错的话同样会调用catch方法，而不是直接报错。
• 再改：使用all方法获取所有的图片地址信息，并对所上传文件进行检测，一旦有一个文件不合格即弹出错误。如果全部文件格式正确即在html模板上创建图片
• 再改写：使用race方法，传入多个promise对象

错误代码

    <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传递对象获取属性。

改写代码：链式调用then方法来改变图片的显示大小

    选择文件: <input type="file" name="file1" id="file1"><br>
    <input type="button" value="读取" onclick="show()"><br>
    <div id="result"></div>
    <script>
        var count = 0;

        function readFile() {
            count++;
            var p1 = new Promise((resolve, reject) => {
                var reader = new FileReader();
                var file1 = document.getElementById('file1').files[0];
                console.log(file1.type);
                if (/image/w+/.test(file1.type) || file1.type == '') {
                    reader.readAsDataURL(file1);
                    reader.onload = event => {
                        resolve(reader.result);
                    }
                } else {
                    reject('该文件不是图片文件');
                }
            });
            return p1;
        }

        function show() {
            readFile().then(
                data => {
                    var imgEle = document.createElement('img');
                    imgEle.src = data;
                    imgEle.id = `createImg${count}`;//动态创建id属性
                    console.log(imgEle.id);
                    document.getElementById('result').appendChild(imgEle);
                    var brEle = document.createElement('br');
                    document.getElementById('result').appendChild(brEle);
                    return imgEle;
                },
                reason => {
                    var pEle = document.createElement('p');
                    pEle.innerText = reason;
                    document.getElementById('result').appendChild(pEle);
                }
            ).then(
                data => {
                    var imgWidth = getComputedStyle(data).width.match(/d+(.d+)?/)[0];//注意不能直接用toString()方法转字符串，因为会被转成带逗号的字符串
                    var imgHeight = getComputedStyle(data).height.match(/d+(.d+)?/)[0];
                    var WHrate = (parseFloat(imgWidth) / parseFloat(imgHeight)).toFixed(2);//长宽比
                    var getImgElement = document.getElementById(`createImg${count}`);
                    console.log(getImgElement);
                    if (WHrate < 1 && imgHeight > 500) {
                        console.log('第一判定true');
                        getImgElement.style.height = '500px';
                        getImgElement.style.width = 500 * WHrate + 'px';
                    } else if (WHrate > 1 && imgWidth > 500) {
                        console.log('第二判定true');
                        getImgElement.style.width = '500px';
                        getImgElement.style.height = 500 / WHrate + 'px';
                    } else if (WHrate == 1 && imgWidth == 500) {
                        console.log('第三判定true');
                        getImgElement.style.width = '500px';
                        getImgElement.style.height = '500px';
                    }
                    console.log(``);
                }
            );
        }
    </script>

创建图片文件并把它加入到文档的最后面，但并不急着读取图片的属性，调用then方法读取属性，并修改图片的大小，限定在500X500之内并维持长宽比。

再改：使用catch方法传递rejiect的值，与then不同的是resolve传递出错的话同样会调用catch方法，而不是直接报错。

    <span class="col-2 text-right">浏览文件:</span>
    <input type="file" name="" id="file1" class="col-4 btn btn-light btn-outline-dark">
    <p></p>
    <input type="button" value="获取图片" class="btn btn-light btn-outline-dark col-4" onclick='show()'>
    <p></p>
    <figure class="figure">
        <figcaption class="figure-caption text-center">图片区</figcaption>
    </figure>
    <script>
        var count = 0;

        function fileRead() {
            count++;
            var p = 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 p;
        }

        function show() {
            fileRead().then(
                data => {
                    var imgEle = document.createElement('img');
                    imgEle.src = data;
                    imgEle.id = `createImg${count}`;
                    document.getElementsByTagName('figure')[0].appendChild(imgEle);
                    return imgEle;
                }
            ).catch(
                reason => {
                    var pEle = document.createElement('p');
                    pEle.innerText = reason;
                    document.body.replaceChild(pEle, document.getElementsByTagName('figure')[0]);
                }
            ).then(
                data => {
                    var getImgEle = document.getElementById(`createImg${count}`)
                    var imgWidth = parseFloat(getComputedStyle(data).width.match(/d+(.d+)?/)[0]);
                    var imgHeight = parseFloat(getComputedStyle(data).height.match(/d+(.d+)?/)[0]);
                    var WHratio = imgWidth / imgHeight;
                    if (WHratio > 1 && imgWidth > 500) {
                        console.log('判定一成功');
                        getImgEle.style.width = '500px';
                        getImgEle.style.height = 500 / WHratio + 'px';
                        getImgEle.className = 'figure-img rounded';
                    } else if (WHratio < 1 && imgHeight > 500) {
                        console.log('判定二成功');
                        getImgEle.style.height = '500px';
                        getImgEle.style.width = 500 * WHratio + 'px';
                        getImgEle.className = 'figure-img rounded';
                    } else if (WHratio == 1 && imgWidth > 500) {
                        console.log('判定三成功');
                        getImgEle.style.width = getImgEle.style.height = 500 + 'px';
                        getImgEle.className = 'figure-img rounded';
                    } else {
                        console.log('判定四成功');
                        getImgEle.className = 'figure-img rounded';
                    }
                }
            )
        }
    </script>

再改：使用all方法获取所有的图片地址信息，并对所上传文件进行检测，一旦有一个文件不合格即弹出错误。如果全部文件格式正确即在html模板上创建图片

<body>
    上传图片： <input type="file" name="" id="file1" multiple>
    <input type="button" value="获取信息" onclick='show()'><br>
    <figure>
        <figcaption>图片区</figcaption>
    </figure>
    <script>
        function readFile(file) {
            var p = new Promise((resolve, reject) => {
                var reader = new FileReader();
                if (/image/w+/.test(file.type)) {
                    reader.readAsDataURL(file);
                    reader.onload = event => {
                        resolve(reader.result);
                    }
                } else {
                    reject('所上传文件包含不符合的文件格式');
                }
            });
            return p;
        }

        function readAll() {
            var file1 = document.getElementById('file1').files;
            var all = [];
            for (let i = 0; i < file1.length; i++) {
                all.push(readFile(file1[i]));
            }
            return all; //返回由图片地址组成的数组
        }

        function show() {
            Promise.all(readAll()).then(
                data => {
                    var count = 0;
                    var imgEle;
                    var imgEles = [];
                    for (let i = 0; i < data.length; i++) {
                        imgEle = document.createElement('img');
                        imgEle.src = data[i];
                        imgEle.id = count++;
                        document.getElementsByTagName('figure')[0].appendChild(imgEle);
                        imgEles.push(imgEle);
                    }
                    return imgEles;
                }
            ).catch(
                reason => {
                    alert(reason);
                    return '';
                }
            ).then(
                data => {
                    console.log(data);
                    var imgWidth, imgHeight, whRatio;
                    for (let i = 0; i < data.length; i++) {
                        imgWidth = parseFloat(getComputedStyle(data[i]).width.match(/d+(.d+)?/)[0]);
                        imgHeight = parseFloat(getComputedStyle(data[i]).height.match(/d+(.d+)?/)[0]);
                        whRatio = imgWidth / imgHeight;

                        if (whRatio > 1) {
                            data[i].style.width = '500px';
                            data[i].style.height = 500 / whRatio + 'px';
                        } else if (whRatio < 1) {
                            data[i].style.height = '500px';
                            data[i].style.width = 500 * whRatio + 'px';
                        } else if (whRatio == 1) {
                            data[i].style.height = data[i].style.width = '500px';
                        }
                    }
                },
                reason => {}
            )
        }
    </script>
</body>

再改写：使用race方法，传入多个promise对象

<body>
    <input type="file" name="" id="file1" multiple>
    <input type="button" value="获取信息" onclick="show()">
    <figure>
        <figcaption>图片区</figcaption>
    </figure>
    <script>
        function show() {
            function readFile(file) {
                //file 接收单个文件
                var reader = new FileReader();
                var p = new Promise((resolve, reject) => {
                    if (/image/w+/.test(file.type)) {
                        reader.readAsDataURL(file);
                        reader.onload = event => {
                            resolve(reader.result);
                        }
                    } else {
                        reject('所传文件格式不正确');
                    }
                });
                return p;
            }

            function readAll() {
                var proArr = [];
                var file1 = document.getElementById('file1').files;
                for (let i = 0; i < file1.length; i++) {
                    proArr.push(readFile(file1[i]));
                }
                return proArr;
                //返回promise对象数组
            }

            Promise.race(readAll()).then(
                data => {
                    //data是图片base64地址,只有一个
                    var imgEle = document.createElement('img');
                    imgEle.src = data;
                    document.getElementsByTagName('figure')[0].appendChild(imgEle);
                    return imgEle;
                }
            ).catch(
                reason => {
                    alert(reason);
                    return '';
                }
            ).then(
                data => {
                    var imgWidth = parseFloat(getComputedStyle(data).width.match(/d+(.d+)/)[0]);
                    var imgheight = parseFloat(getComputedStyle(data).height.match(/d+(.d+)/)[0]);
                    var whRatio = imgWidth / imgheight;
                    if (whRatio > 1) {
                        data.style.width = '500px';
                        data.style.height = 500 / whRatio + 'px';
                    } else if (whRatio < 1) {
                        data.style.height = '500px';
                        data.style.width = 500 * whRatio + 'px';
                    } else {
                        data.style.width = data.style.height = '500px';
                    }
                },
                reason => {

                }
            )
        }
    </script>
</body>