有没有办法在js中设置单个数组元素的样式答案

【问题标题】：Is there a way to style individual array elements in js有没有办法在js中设置单个数组元素的样式
【发布时间】：2015-08-24 07:43:32
【问题描述】：

我目前正在开发一个记忆游戏，其中我有一个游戏板，其中填充了通过js 创建的 div。我正在尝试将图像添加到我的数组值中。这是我的数组：

var memory_array = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H'];

我想为每一对附加一张图片，以使我的项目更有趣。我目前正在尝试 memory_array[0].style.background-image 它正在破坏我的项目。任何帮助将不胜感激。

【问题讨论】：

它以什么方式破坏了您的项目？
你能展示更多你的代码吗？你想用数组中的每个字母存储一个图像名称吗？还是你问如何使用js数组作为数据模型来展示html元素？
你可以为 DOM 树中的元素设置样式，但你不能设置 js 数组的元素。可能你有一个错误，比如 "style is not a property of memory_array"

标签： javascript css arrays styling

【解决方案1】：

它是.backgroundImage，但您的数组由字符值组成，它们没有style 属性。要调用.style，您必须获取DOM 元素，f.e.与document.getElementById 或document.getElementsByClassName。我建议给他们类名（.className）并在 css 中设置图像，而不是直接使用.style.backgroundImage。

【讨论】：

你能给我一个在我的数组的第一个元素中添加一个类名的例子吗？
你为什么要这样做？就像我说的，您首先必须创建/获取 DOM 元素，在您的数组元素上设置 .className 不会改变外观。
我的问题是数组元素不是静态的。在页面刷新时，它们是随机的。我知道如何设置静态 div 的样式，但我想设置随机元素的样式。例如。单击时，div 将显示我的字母元素之一。我不想透露一封信，而是想透露一张我选择的图片。
不要将元素分配给div 的内容，而是将它们分配给它们的类名。然后在你的css中你做类似.card.A. { background-image: url_to_a_image }

【解决方案2】：

它不起作用的原因是您的数组元素是字符串而不是对象。一个简单的解决方案是让你的数组像这样：

var memory_array = [{name:'A'}, {name:'B'}, ...];

现在，在拨打memory_array[0].style-background-image:"SomeImage"之后；您的第一个元素将变为：

{name: 'A',
 style-background-image: "SomeImage"
}

请注意，这不会直接更改任何样式。在构建 DOM 元素时，您必须调用属性 style.backgroundImage 并将其应用于每个元素

【讨论】：

感谢您的回复。我会继续在我的样式表或脚本文件中设置样式名称吗？
@Tone 如果可以的话，我会建议您使用样式表，并且仅在 css 无法满足您的需要时才使用 js。请将您生成divs的js部分发布，以便我们更好地了解您的问题。
memory_array[0].style.background-image="SomeImage" 语法无效。