Javascript 如何将网页上每个图像的大小增加一倍？_Javascript_Css

Javascript 如何将网页上每个图像的大小增加一倍？

javascript css

Javascript 如何将网页上每个图像的大小增加一倍？,javascript,css,Javascript,Css,有一个网页，我想把所有图片的大小增加一倍。我不知道任何JavaScript或CSS。有人能给我写些代码吗？我试过这个： Array.prototype.forEach.call(document.getElementsByTagName('img'),function(i){ i.width = i.width * 2;i.height = i.height * 2 }); 但我不知道我在做什么，而且它不起作用。请帮忙这就是我想要加倍的元素的样子，如果有任何帮助的话：在JavaSc

有一个网页，我想把所有图片的大小增加一倍。我不知道任何JavaScript或CSS。有人能给我写些代码吗？我试过这个：

Array.prototype.forEach.call(document.getElementsByTagName('img'),function(i){
    i.width = i.width * 2;i.height = i.height * 2
});

但我不知道我在做什么，而且它不起作用。请帮忙

这就是我想要加倍的元素的样子，如果有任何帮助的话：

在JavaScript中尝试：

for (i=0; i < document.images.length; i++) {
    document.images[i].height *= 2;
    document.images[i].width *= 2; 
}

for（i=0；i

正如我在前面的评论中提到的，由于CSS属性

背景图像

，您的代码不会将作为背景图像的图像接触到非

html元素

因此，您需要运行这两个代码来加倍

标记

您还需要将CSS属性

背景大小设置为200%自动

当然，现在的问题是，要添加什么css属性。很有可能4chan上的所有这些图像也是链接。因此，它们必须是带有背景图像的锚定标签
对不起，我在办公室，所以我不会打开4chan来确认这一点
但您可以在同一网站上尝试以下代码：
$('a').css('background-size', '200% Auto');

我的快速解决方案使用jQuery，但您明白了
更新：
Array.prototype.forEach.call(document.getElementsByTagName('img'),function(i){i.width = i.width * 2;i.height = i.height * 2});

Array.prototype.forEach.call(document.getElementsByTagName('a'),function(i){i.style['background-size'] = '200% Auto'; });

参考资料：
我发现了这个网站为用户提供的一个极好的功能，包括内置的自定义缩略图查看功能
4 CHAN主页设置菜单
该菜单提供了很多选项，可以根据您的喜好来配置网页。我惊讶地看到一个customcss
功能，它显示了一个CSS框
，它将接受您自己的自定义标记，从而将站点定制到标记级别！再多说一点
首先，我想提到的是，它们确实提供了两个随时可用的选项，可以满足您的缩略图查看要求
赏金编辑：的用户在4chan Qt中已经有了这两个选项≪质量缩略图≫ 设置菜单。如果您正在使用此脚本，请跳到下面的下一个编辑
请看这个屏幕截图，其中显示了要执行的3个步骤，步骤2是其中之一
右键单击下面的图像，然后以全尺寸查看（如果有帮助）：
在新选项卡中打开图像/查看图像

在上面的步骤1中，请注意设置
反映的是4 CHAN主页
，而不是脚本
在上面的步骤2a中，这将紧密复制平均图像的两倍图像大小，但如果这些图像超大，它们将使用可用的浏览器宽度
在上面的步骤2b中，此选项将显示一个超大图像，如果它的宽度大小达到浏览器的宽度大小
如果这两个随时可用的缩略图选项都不适合您的口味，请继续阅读
由于您最初的目标是查看两倍大小的缩略图，或200%
，因此我分析了网页，以确定以该大小显示这些缩略图图像所需的最低设置，但请注意，许多缩略图在两倍大小时会模糊，因为质量没有提高。请参阅下面的“赏金编辑”，了解任何大小都不模糊的图像的解决方案
话虽如此，您可以选择150%
在放大模糊的同时最小化模糊，或者如果不想使用Greasemonkey，可以选择您可以接受的值

赏金编辑：
Array.prototype.forEach.call(document.getElementsByTagName('img'),function(i){i.width = i.width * 2;i.height = i.height * 2});

Array.prototype.forEach.call(document.getElementsByTagName('a'),function(i){i.style['background-size'] = '200% Auto'; });

使用这些CSS设置时，模糊图像不再是问题，因为缩略图的大小是的两倍
注意：您需要删除自动应用于Greasemonkey脚本中Disable 4chan扩展名的默认复选标记，可通过单击4chan Qt访问该复选标记≪质量缩略图≫ 设置链接位于网页右上角
退出设置菜单后，进入4 CHAN主页设置菜单。删除除自定义CSS的之外的所有复选标记。可以肯定的是，上面的图像没有删除4chan-x推荐的所有复选标记

注意：使用自定义CSS设置选项会使设置菜单无法访问！您需要使用内置的浏览器inspect元素
，动态地进行更改以重新获得控制权
下面的框不是图像。选择、复制此CSS，然后将其粘贴到“设置”菜单的“CSS”框中：
div.file，a.fileThumb img{
宽度：200%！重要；
高度：200%！重要；
浮动：左；
}
.fileInfo{
利润率：10px；
}

为了清楚起见，这里是该框的屏幕截图：


将上述代码粘贴到CSS框
后，按保存CSS按钮
，确保对自定义CSS
有复选标记
，然后按保存按钮
退出
然后，页面将使用这些新设置刷新自身。享受你的2倍缩略图
赏金编辑：提醒您，上图显示了应删除的基本部分中的复选标记。可以肯定的是，主页右上角中间将有4个CHAN的原始设置菜单：
[4千夸脱≪质量缩略图≫ 设置][设置][主页]
我假设即使是CSS解决方案也能为您工作（根据您的问题）。如果没有限制真正的DOM宽度和高度，您也可以使用CSS转换
img {
    -webkit-transform: scale(2,2);
    -moz-transform: scale(2,2);
    -ms-transform: scale(2,2);
    /* etc. */
    transform: scale(2,2);
}

您是否正在尝试在GreaseMonkey或javascript控制台中为已加载到浏览器中的网站执行某些操作？如果您粘贴到浏览器的javascript控制台中，您已经想到的代码应该可以完成这项工作。(