获取类字符串并使用Javascript添加内联css

我有下一个输出代码：

<div class="post-term">
  <a href="/term/1" class="color-cc0000">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-999999">historical</a>
</div>

<div class="post-term">
  <a href="/term/1" style="background-color: #cc0000">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-">historical</a>
</div>

如何在类属性中的“color-”之后获取字符串并添加css背景色内联样式

生成的代码应为：

<div class="post-term">
  <a href="/term/1" style="background-color: #cc0000">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" style="background-color: #999999">historical</a>
</div>

我使用的是Drupal视图，因此可以使用Javascript将css类属性添加到目标字符串中

我尝试过的不同代码的问题是，只有正确更改第一个类，而下一个类只是删除字符串。让我在下一个生成的输出代码中更好地解释：

<div class="post-term">
  <a href="/term/1" class="color-cc0000">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-999999">historical</a>
</div>

<div class="post-term">
  <a href="/term/1" style="background-color: #cc0000">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-">historical</a>
</div>

---

事先非常感谢。

如@wizzwizz4所述，您在这里误用了css class属性。最好将其声明为数据属性

使用

document.querySelectorAll

和适当的CSS选择器获取链接元素，迭代从获取的节点列表创建的数组，并以编程方式设置背景色，如下所示：

const postlinks=Array.from（document.querySelectorAll（'.post-term a'））；
for（postlinks中的const postlink）{
postlink.style.backgroundColor=`${postlink.className.split（'-'）[1]}`；
}

---

之前：正如@wizzwizz4所提到的，您在这里误用了css class属性。最好将其声明为数据属性

使用

document.querySelectorAll

和适当的CSS选择器获取链接元素，迭代从获取的节点列表创建的数组，并以编程方式设置背景色，如下所示：

const postlinks=Array.from（document.querySelectorAll（'.post-term a'））；
for（postlinks中的const postlink）{
postlink.style.backgroundColor=`${postlink.className.split（'-'）[1]}`；
}

---

不过，使用

数据属性来存储此类数据是一种很好的做法，您也可以使用class属性来实现


$（'.post-term a'）。每个（函数（）{
$（this.css（'background-color'，'#'+$（this.attr（'class'））.split（'-'）[1]）；
})
不过，使用
数据属性来存储此类数据是一种很好的做法，您也可以使用class属性来实现


$（'.post-term a'）。每个（函数（）{
$（this.css（'background-color'，'#'+$（this.attr（'class'））.split（'-'）[1]）；
})
以防您在一个类中不仅有
color-999999
，而且有
color-999999foo
或
foo color-9999999
，并且父项名称不是
。每次都是post term


var aElements=$（“a”）.filter（函数（）{
返回$（this.attr（“class”）.match（/color \-/）；
});
$。每个（元素、函数（索引、el）{
让col=el.getAttribute（“class”）.match（/color\-[a-z0-9]{6}/）[0]。拆分（“-”[1]；
el.setAttribute（“样式”、“背景色：#“+col+”；”）；
});
以防您在一个类中不仅有
color-999999
，而且有
color-999999foo
或
foo color-9999999
，并且父项名称不是
。每次都是post term


var aElements=$（“a”）.filter（函数（）{
返回$（this.attr（“class”）.match（/color \-/）；
});
$。每个（元素、函数（索引、el）{
让col=el.getAttribute（“class”）.match（/color\-[a-z0-9]{6}/）[0]。拆分（“-”[1]；
el.setAttribute（“样式”、“背景色：#“+col+”；”）；
});

这不是类的用途。您可能应该使用
data-
属性。我使用的是Drupal视图，它只允许添加类属性。当您可以选择非jQuery的答案时，为什么您更喜欢jQuery答案？您好@connexo。我选择了两者，但Jquery答案是最后一个，它是剩下的一个。我不知道，我只能选择一个正确的答案。老实说，Jquery的答案对我来说更好，Drupal使用Jquery，但问题是关于Javascript的，所以你的答案是最合适的。这不是类的用途。您可能应该使用
data-
属性。我使用的是Drupal视图，它只允许添加类属性。当您可以选择非jQuery的答案时，为什么您更喜欢jQuery答案？您好@connexo。我选择了两者，但Jquery答案是最后一个，它是剩下的一个。我不知道，我只能选择一个正确的答案。老实说，Jquery答案对我来说更好，Drupal使用Jquery，但问题是关于Javascript的，所以你的答案是最合适的。我使用的是Drupal视图，它只允许添加类属性。@在这种情况下，你的代码工作得很好，对我来说看起来很窄，但我不知道为什么要在第一个“color-”之后删除颜色代码换班。请参阅问题更新。非常感谢Sangram。我使用的是Drupal视图，它只允许添加类属性。@在这种情况下，在这里你的代码工作得很好，对我来说看起来很窄，但我不知道为什么在第一次“颜色-”类更改后删除颜色代码。请参阅问题更新。非常感谢Sangram。你的代码运行得很好，但我不知道为什么在第一次更改类后在“color-”之后删除颜色代码。请参阅问题更新。非常感谢。它适用于任何数量的链接，我刚刚在这里的示例代码中添加了一些。我不知道你为什么会得到添加到帖子中的结果。你在哪个浏览器中观察到了这一点？我正在Firefox、Chrome和Edge上进行测试。我认为这是Drupal的问题，但我不明白这是怎么可能的，因为上周我错误地删除了一个Javascript代码，它工作得很好：（你的代码工作得很好，但我不知道为什么要在“color…”之后删除颜色代码在第一个类更改之后。请参阅问题更新。非常感谢。它适用于任何数量的链接，我刚刚在这里的示例代码中添加了一些。我不知道为什么您会得到添加到帖子中的结果。您在哪个浏览器中观察到了这一点？我正在测试Firefox、Chrome和Edge。我认为这是Drupal的问题，但我不知道您的想法