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])
}),
1
kkocdko 2021-09-01 12:18:29 +08:00
你试试 window.foo = e,然后 F12 里头选中元素,$0 === window.foo ?
|
4
misdake 2021-09-01 12:53:18 +08:00
style 改了么
|
5
Vegetable 2021-09-01 13:03:59 +08:00
既然已经修改了 dom 了,没有效果就不是代码的问题了。
一般来说我会通过 css 控制图片大小,而不是 img 标签的属性。 你可以试一下,因为即使设置了 img 的属性,他依然可能会被 css 覆盖,所以第一步是先检查 hex-exe-img 这个 class 里有没有声明尺寸 |
8
renmu123 2021-09-01 14:14:10 +08:00 via Android
你要不动态设置 imgg 父级的 font-size,然后 img 的宽高用 em 单位
|
10
joesonw 2021-09-01 15:07:56 +08:00
用 newImg.height = xxx, i 没有被 closure 拿到, i 变成 arr_latexImg.length 了.
|
12
aglsv OP @joesonw 但是我执行到 onload 里面的时候 console 了一下 i,他是 0,1,2 正确显示的,我这个方法哪块会产生闭包啊
|
13
coolan 2021-09-01 15:54:32 +08:00
我在你这帖子里试了试:t = $("div.markdown_body").children().find("img") 别的没变,执行 setLatexSize(r,15);是可以改变图片的。
|
15
autoxbc 2021-09-01 16:04:37 +08:00
出现图片标签里套图片标签,应该是替换语句写成了插入语句,可以检查一下上下文
改元素属性并不需要一个新元素的去替代,自然也不需要去等待 onload,整个过程都是同步操作,也不需要异步函数 |
17
aglsv OP @autoxbc 主要是我这个设置新的宽高需要原宽高来计算,属于按比例放大,所以需要 onload,我这个方法里面目前就只是遍历数组获取 img 元素之后设置宽高,也没有些什么插入之类的
|
19
Summerdx404 2021-09-01 16:27:44 +08:00
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 |
20
aglsv OP @Summerdx404 我这块直接通过```arr_latexImg[i].height```来设置图片的宽度,这种应该是直接改宽高的吧。
@autoxbc 我要获取的是图片的原始高度,如果我的图片高度已经改变过了的话这时候再执行读取的就是改变后的,所以我用的是新建的。 |
21
aglsv OP @Summerdx404 看了一下 img.height 设置的就是 img 的 height 属性,是我知识浅薄了
|