使用 onload 给改边图片宽高无效

[aglsv]

async function setLatexSize(arr_latexImg, fontSize) {
        for (let i = 0;i< arr_latexImg.length;i++){
            let newImg = new Image()
            newImg.src = arr_latexImg[i].src
            await new Promise((resolve) => {
                newImg.onload = function() {
                    arr_latexImg[i].height = fontSize * newImg.height / 16
                    arr_latexImg[i].width = fontSize * newImg.width / 16
                    arr_latexImg[i].setAttribute('width', fontSize * newImg.width / 16);
                    arr_latexImg[i].setAttribute('height', fontSize * newImg.height / 16);
                    resolve()
                }
            })
        }
    }

我想跟踪字号的改变来设置图片的宽高，通过 for 循环遍历每一个 img 元素，之后通过 onload 里面来设置 img 元素的宽高，但是现在的问题是当我 console 出arr_latexImg[i]的时候，他标签上面是有宽高属性的，但是我页面中的元素本身依旧是原来的样子，没有变化

上面是页面中的元素标签，下面的图是我在 console 中显示的arr_latexImg[0]，arr_latexImg[0]中的属性是设置上了，但是元素本身依旧没有， arr_latexImg这个数组是通过 jq 获取元素，完了 each 一个新的数组，r 这个数组就是给我传的arr_latexImg，下面是压缩后的代码。我想知道目前的问题是在哪块，是我方法哪块写的有问题吗

t = $("div.table").children().find("img.hex-exe-img"),
                        r = [];
                        $.each(t, function(e, n) {
                            r.push(t[e])
                        }),

现在是当第一次进入我这方法的时候传过来的数组中的 img 都还是正常的，也会指向页面的标签，但是当我第一次执行 await 之后，数组里的 img 标签就会变得很奇怪
https://img-mid.csdnimg.cn/release/static/image/mid/ask/882542974036194.png?x-oss-process=image/auto-orient,1
这个是我刚进入方法的时候，arr_latexImg[0]打印出来的，
https://img-mid.csdnimg.cn/release/static/image/mid/ask/144962974036120.png?x-oss-process=image/auto-orient,1
这个是我执行了一次 await 之后，在打印就变成了这样，他成了 img 标签里还有个 img 标签，这个是怎么回事啊

[kkocdko]

你试试 window.foo = e，然后 F12 里头选中元素，$0 === window.foo ？

[aglsv]

@kkocdko 是在我写的方法里加上 window.foo = e 吗

[aglsv]

@kkocdko 加在 for 循环里还是 onload 里面呢

[misdake]

style 改了么

[Vegetable]

既然已经修改了 dom 了，没有效果就不是代码的问题了。
一般来说我会通过 css 控制图片大小，而不是 img 标签的属性。
你可以试一下，因为即使设置了 img 的属性，他依然可能会被 css 覆盖，所以第一步是先检查 hex-exe-img 这个 class 里有没有声明尺寸

[aglsv]

@Vegetable 我看 css 里面没有设置过这类图片的宽高

[aglsv]

@misdake css 里面一开始没有设置宽高

[renmu123]

你要不动态设置 imgg 父级的 font-size，然后 img 的宽高用 em 单位

[aglsv]

@renmu123 不能这么设置，我需要获取

[joesonw]

用 newImg.height = xxx, i 没有被 closure 拿到, i 变成 arr_latexImg.length 了.

[joesonw]

@joesonw 看错了, const j = i 一下;

[aglsv]

@joesonw 但是我执行到 onload 里面的时候 console 了一下 i，他是 0，1，2 正确显示的，我这个方法哪块会产生闭包啊

[coolan]

我在你这帖子里试了试：t = $("div.markdown_body").children().find("img") 别的没变，执行 setLatexSize(r,15);是可以改变图片的。

[aglsv]

@coolan setLatexSize 这个方法原封不动吗？

[autoxbc]

出现图片标签里套图片标签，应该是替换语句写成了插入语句，可以检查一下上下文

改元素属性并不需要一个新元素的去替代，自然也不需要去等待 onload，整个过程都是同步操作，也不需要异步函数

[coolan]

@aglsv 对，你直接在这个页面里 F12 试一下就行。

[aglsv]

@autoxbc 主要是我这个设置新的宽高需要原宽高来计算，属于按比例放大，所以需要 onload，我这个方法里面目前就只是遍历数组获取 img 元素之后设置宽高，也没有些什么插入之类的

[autoxbc]

@aglsv #17 你的代码不是从新元素上读这个属性再计算么，那为什么不直接读原来的元素呢

[Summerdx404]

img 标签的 width 和 height 属性通常是用来加载时预留位置的

需要改变加载完成后的显示大小，建议把 img 放在一个容器里, 通过改容器的高宽+css 的方法应该可行

参考:
https://www.w3school.com.cn/tags/att_img_height-width.asp
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

[aglsv]

@Summerdx404 我这块直接通过```arr_latexImg[i].height```来设置图片的宽度，这种应该是直接改宽高的吧。
@autoxbc 我要获取的是图片的原始高度，如果我的图片高度已经改变过了的话这时候再执行读取的就是改变后的，所以我用的是新建的。

[aglsv]

@Summerdx404 看了一下 img.height 设置的就是 img 的 height 属性，是我知识浅薄了

[autoxbc]

@aglsv #20 在第一次设置时把原始值保存起来，以后就可以直接读取了。这个保存位置可以是元素上的自定义属性，也可以是一个全局有效的 Map

[aglsv]

@autoxbc ok，多谢了