时间戳

首页 > 解决方案 > 数组元素的样式 .src 属性

javascript - 数组元素的样式 .src 属性

问题描述

所以我有以下代码，当按下空格键时，图像被切换。我的问题是我的每个图像都有不同的分辨率，正如 w3schools 解释的那样：“注意：src 属性可以随时更改。但是，新图像继承了原始图像的高度和宽度属性，如果不是新的高度和指定了宽度属性。" 但是，正如您在代码中看到的那样，我的图像是数组元素。有人知道如何设置数组元素的样式吗？谢谢！！

在图像之间切换：

setTimeout(function() {
let icon = document.getElementById("icon-p1")
icon.style.display = 'block'
let spaceship1 = "Photo/Spaceship.png"
let spaceship2 = "Photo/Spaceship1.png"
let spaceship3 = "Photo/Spaceship2.png"
let spaceship4 = "Photo/Spaceship3.png"
let hits = 0;
const images = [spaceship1, spaceship2, spaceship3, spaceship4]
document.body.onkeyup = function(e) {
if (e.keyCode === 32) {hits++; icon.src = images[hits % 4]}}}, 4000)}

初始图像

<img src="Photo/Spaceship.png" id="icon-p1" style="display:none">

标签： javascriptarrayssrc

解决方案

您不会设置数组元素的样式，而是设置实际的 HTML 元素。

您可以使用 javascript 来检测下一个图像并以这种方式设置高度和宽度。

您也可以使用 2D 数组来存储它们，如下所示：

const images = [[spaceship1,"1920px","1080px"],[spaceship2,"1366px","768px"]];

然后使用 javascript 使用该图像的指定高度和宽度动态设置高度和宽度。

设置图像源将保持不变，并像这样设置高度和宽度：

icon.height = images[0][1]
icon.width = images[0][2]

第一个数组索引是您想要的图像。

推荐阅读