时间戳

首页 > 解决方案 > 通过以更改 Javascript 代码的方式修改 CSS 代码来更改 SVG 元素颜色的最佳方法是什么？

javascript - 通过以更改 Javascript 代码的方式修改 CSS 代码来更改 SVG 元素颜色的最佳方法是什么？

问题描述

我一直在为 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 的类，那么它会再次以红色开始（这很好），但是当类被删除/添加时，没有任何变化。

如果我从元素中删除填充：红色并且不添加有问题的类，它开始时就好像它有填充：黑色，可能是因为外部类做了一个描边：黑色作为边框。

如果有帮助，这是我的 codepen 的链接：https ://codepen.io/glennqhurd/pen/EQqxKe

重申一下，我不是在问如何使用 Javascript 来更改 CSS。我在问如何使用 Javascript 来更改 HTML 对象的类，从而在不更改类本身的情况下更改对象的属性。

标签： javascriptjqueryhtmlcss

解决方案

您必须.attr()在 svg 上使用...因为.addClass()并且.removeClass不起作用。请参阅有关它的其他答案。

现在，arc1default如果arc1flash要将默认/闪存连接到button.

我更新了你的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);
}

推荐阅读