通过onload事件设置宽高的问题

发布于 2022-09-13 01:16:20 字数 1098 浏览 32 评论 0

async function setLatexSize(arr_latexImg, fontSize) {
        for(let dom_img of arr_latexImg){
            let newImg = new Image()
            newImg.src = dom_img.src
            await new Promise((resolve) => {
                newImg.onload = function() {
                    dom_img.height = fontSize * newImg.height / 16
                    dom_img.width = fontSize * newImg.width / 16
                    dom_img.setAttribute('width', fontSize * newImg.width / 16);
                    dom_img.setAttribute('height', fontSize * newImg.height / 16);
                    resolve()
                }
            })
        }
    }

我想通过onload事件来改变图片的宽高,现在的问题是,我现在触发了onload,这时候在获取dom_img.height显示的是改变后的高度,但是页面上的图片并没有变化,而我选中dom_img的时候也没有指向页面中的元素,但是dom_img的src和页面中的图片确实是相同的。想问问这个是什么问题啊

image.png
image.png
image.png

image.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

怎言笑 2022-09-20 01:16:20

你是想获取图片真实宽高?Img元素有naturalHeight/naturalWidth这两个属性可以取到;然后再说这个无效的问题,设置宽高为啥设置attribute?img.style.width = '100px';属性的优先级很低的,任何一个css都可以覆盖

function setLatexSize(arr_latexImg, fontSize) {
        for(let dom_img of arr_latexImg){
               dom_img.style.cssText = `width:${fontSize * dom_img.naturalWidth / 16}px;height:${fontSize * dom_img.naturalHeight / 16}px`;
        }
}


你要看样式问题应该看style面板

流年已逝 2022-09-20 01:16:20

我用你的方法测试了一下,可以正常的添加attr,也能正常的改变大小
你说元素上没有width和height属性而且划向它也不会指向页面中的图片,很大概率页面上那个元素就不是dom_img(你可以检查一下哪里出错了,看是输出错元素了吗)
另外可以检查一下传入的参数是否正确呢
我还有个问题,为什么要新建一个img而不是直接用dom_img呢?
另外:我也是新手,大家一起交流交流ヾ(≧▽≦*)o

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文