javascript - 网页中元素图像的动态变化

标签 javascript html css

我不确定在这里问这个问题是否合适。如果不是,请原谅我并指出我应该问的地方。

看看这个页面:lichess

我想做的是: 根据我玩的颜色(白色/黑色),我只想更改我的(分别为白色/黑色)国王的形象。所以如果我是白棋,只有白棋王会受到这个变化的影响。我是黑人时的类比相同。这种变化显然只有我自己才能看到。

这是如何实现的,具体采用什么方式?

附言该网站的 github(如果有帮助的话):github.com/ornicar/lila

最佳答案

我将给出一个大纲和一些代码。这可以根据用户选择的颜色来实现。如果您将其存储在变量中(即 Javascript var color = white;),它真的很有帮助。首先,当你硬编码时,确保你的图像的 src 是空的。然后,在用户选择他的颜色后,您可以更改图像。示例如下。

<img src="" alt="player" />
<script>
function initImage(color) {
    var imgsrc = document.getElementById("imgplayer").src = color + ".jpg/.png/etc.";
}
</script>

关于javascript - 网页中元素图像的动态变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40982345/

相关文章:

jquery - 为什么 div 在部分 View 中回发后重复使用相同的 id 和类,MVC

html - 容器内 float 元素时的填充问题

css - 从 css 样式表获取样式而不是内联样式参数

html - 将图标居中 :before

javascript - 如何使用 JavaScript 通过 Firebase 发送远程通知?

javascript - Android 中下拉列表的闪烁(appverse)

javascript - MMENU jquery 插件将所有 JS 脚本加倍

javascript - 悬停工具提示显示详细 jquery

html - 如何使用 nodejs 将变量从一个页面传递到另一个页面(传递给 1 个特定用户)?

javascript - 如何使用javascript在html上获取上个月和下个月的结果