Javascript 将特定 class 的所有 div 中的所有图像的大小加倍

Question

所以我写了这个 javascript 来将特定 class 的所有 div 中所有图像的图像大小加倍。这是我想出的。

var lmnts = document.getElementsByTagName('*'), i;
for (i in lmnts) {
    if((' ' + lmnts[i].className + ' ').indexOf(' ' + 'ClassName' + ' ') > -1) {
        var images = document.lmnts[i].getElementsByTagName('img');
        for(var j=0; j<images.length; j++)
        {
            images[j].height *= 2;
            images[j].width *= 2;
        }
    }
}

但是我无法让它工作:(

编辑：这是一个用户脚本。所以它不起作用意味着它没有做它应该做的事情。 js控制台没有错误。

调试时，我发现它只进入第一个循环一次，然后在该行之后失败 var images = document.lmnts[i].getElementsByTagName('img');

EDIT2：这是一个用户脚本，可以将 class fileThumb 在 4chan.org 板上的所有图像的图像大小加倍。

Answer 1

主要问题是 var images = document.lmnts[i].getElementsByTagName('img'); 行。

lmnts 是一个变量，而不是 document 的属性。

应该是var images = lmnts[i].getElementsByTagName('img');

另外，不用手动遍历 DOM 中的所有元素并手动测试 className 是否包含您想要的 class，您可以使用 document.getElementsByClassName('ClassName')或更现代的 document.querySelectorAll('.ClassName')。使用第二种方法，您还可以 select 一次性使用 document.querySelectorAll('.ClassName img') 所有图像。

所以你所有的代码都可以简化为

var images = document.querySelectorAll('.ClassName img');
for (var j = 0; j < images.length; j++){
    images[j].height *= 2;
    images[j].width *= 2;
}

更新（基于评论）

4chan 上的图像应用了设置尺寸的 style 属性，而 images[j].height 设置图像的 height 属性。不幸的是， style 属性占优势并显示脚本中设置的值无效。

您应该像这样更改 style 属性

var images = document.querySelectorAll('.fileThumb img');
for (var j = 0; j < images.length; j++){
    var image = images[j],
        initialWidth = parseInt(image.style.width, 10),
        initialHeight = parseInt(image.style.height, 10);

    image.style.width = (initialWidth * 2) + 'px';
    image.style.height= (initialHeight * 2) + 'px';
}

Javascript 将特定 class 的所有 div 中的所有图像的大小加倍

Javascript to double size of all images in all divs of a particular class

javascript

greasemonkey

userscripts