JS--自定义图像属性

JS--custom image attributes

本文关键字：属性 图像 自定义 JS--      更新时间：2023-09-26

我需要能够定义这样一个事实，即像这样的棋盘游戏图块的顶部边缘有一个城市，左边缘和底部边缘有道路，右边缘有草。

我该怎么做？从我读到的有关HTML5自定义数据属性的内容来看，它们似乎是一个可行的选择（例如，"data-left='road'..."），但我希望在进入项目之前收到具有更多编码经验的人的确认。有什么想法吗？

您可以使用 toske 所说的自定义属性，但我建议您创建方案的数据对象模型表示形式（使用 JSON），它们处理此模型以呈现您的接口。

编辑：这是一个示例。数据是包含表示每个磁贴的一些对象的磁贴数组。我使用了jQuery，但你可以使用你想要的JavaScript库。我评论说，如果你不知道如何使用jQuery，你就会学习它。这是一个非常强大和简单的库。

是的，您可以在 HTML 5 中使用自定义数据属性。只需在它们前面加上"data-"，例如 

<img src="foo.jpg" data-some-arbitrary-attribute="foo" />

您绝对可以将自定义属性放在HTML5标签中，例如：

    <img left-connection="road" right-connection="railroad"... />

虽然我宁愿建议只用 id 标记 img 标签，然后有一个将 ID 映射到连接数据的 JSON 对象，例如：

    <img id="a11" src="..." />
    <script type="text/javascript> 
       var connectivityData = { a11 : { left : 'road',right:'railroad'}}
    </script>
相关文章：