我一直在为游戏 Simon 写一个 codepen,我被要求重写它,这样如果有人像和我一起工作的艺术家一样可以访问 html 和 css 但不知道 javascript 是如何工作的(或者无法访问 .js 文件)想要更改按钮的颜色,他们可以这样做而无需更改 javascript 代码。所以我的计划是编写 js 代码,以便它添加/删除影响路径元素的类。路径元素是这样的:
<path class="outer arc1default" id="arc1"/>
使用这些 CSS 类:
.outer {
stroke: black;
stroke-width: 10;
}
.arc1default {
fill: red;
}
如果按设计颜色在点击时发生变化,则添加此类:
.arc1flash {
fill: pink;
}
在 .js 代码的第 73 行,我使用了以下内容:
function buttonFlash(button) {
console.log("button is: " + button);
//$("#" + button).attr("class", button + "flash outer");
//$("#" + button).removeClass(button + "default");
$("#" + button).addClass(button + "flash");
//$("#" + button).css({ fill: buttonDict[button].flash });
buttonDict[button].sound.play();
setTimeout(function() {
$("#" + button).attr("class", button + "default outer");
//$("#" + button).css({ fill: buttonDict[button].color });
buttonDict[button].sound.pause();
buttonDict[button].sound.currentTime = 0;
}, 300);
}
//符号中的代码是我之前尝试过的代码,当时没有工作,但我将其保留以供引用,以防我遗漏某些内容并错误地使用它但在正确的路径上。
无论如何,这是我观察到的结果:
如果我使用 CSS 中的 id 启动带有 fill:red 的元素,它会以红色开始并在添加/删除类时保持红色。
如果我删除了那部分代码,但在路径元素的开头是一个表示 fill:red 的类,那么它将再次以红色开头(这很好),但是当类被删除/添加时,没有任何变化。
如果我从元素中删除 fill:red 并且不添加有问题的类,它开始时好像它有 fill:black,可能是因为外部类为边框做了 stroke: black。
如果有帮助,这里是我的代码笔的链接:https://codepen.io/glennqhurd/pen/EQqxKe
重申一下,我不是在问如何使用 Javascript 来更改 CSS。我问的是如何使用 Javascript 来更改 HTML 对象的类,从而在不更改类本身的情况下更改对象的属性。
最佳答案
您必须在 svg 上使用 .attr()
... 因为 .addClass()
和 .removeClass
不起作用。 See this other answer about it .
现在,如果您想将 default/flash 连接到 按钮
。
我更新了你的 CodePen
function buttonFlash(button) {
console.log("button is: " + button);
$("#" + button).attr("class", "outer " + button + "flash");
buttonDict[button].sound.play();
setTimeout(function() {
$("#" + button).attr("class", "outer " + button + "default");
buttonDict[button].sound.pause();
buttonDict[button].sound.currentTime = 0;
}, 300);
}
关于javascript - 通过以更改 Javascript 代码的方式修改 CSS 代码来更改 SVG 元素颜色的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51219844/