Question

我有下一个输出代码：

<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>

如何在class属性的“ 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 Views，因此可以使用Javascript将CSS类属性添加到目标字符串中。

我尝试使用不同代码的问题是，仅正确更改第一个类，而下一个仅删除字符串。让我在下一个结果输出代码中更好地解释：

<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>

非常感谢。

Answer 1

之前：如@ wizzwizz4所述，您在此处滥用了CSS类属性。最好将其声明为数据属性。

使用document.querySelectorAll和适当的CSS选择器获取链接元素，遍历从要获取的节点列表创建的数组，并以编程方式设置背景颜色，如下所示：

const postlinks = Array.from(document.querySelectorAll('.post-term a'));

for (const postlink of postlinks) {
  postlink.style.backgroundColor = `#${postlink.className.split('-')[1]}`;
}

<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" class="color-00cc00">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-0000cc">historical</a>
</div>

<div class="post-term">
  <a href="/term/1" class="color-000000">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-dddddd">historical</a>
</div>

如果要删除类属性（如目标代码所示），请在for .. of循环内添加以下行：

postlink.removeAttribute('class');

Answer 2

尽管，使用data-attributes存储此类数据是一种好习惯，但也可以使用class属性来实现

$('.post-term a').each(function(){
 $(this).css('background-color','#'+$(this).attr('class').split('-')[1]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-term">
  <a href="/term/1" class="color-cc0000" data-color='cc0000'>historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="color-999999" data-color='999999'>historical</a>
</div>

Answer 3

如果您的班级不仅是color-999999，而且不是color-999999 foo或foo color-999999，并且每次的父级名称都不是.post-term

var aElements = $("a").filter(function() {
  return $(this).attr("class").match(/color\-/);
});

$.each(aElements, function(index,el){
	let col = el.getAttribute("class").match(/color\-[a-z0-9]{6}/)[0].split("-")[1];
        el.setAttribute("style", "background-color: #" + col + ";");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="post-term">
  <a href="/term/1" class="color-cc0000 foo">historical</a>
</div>

<div class="post-term">
  <a href="/term/2" class="foo color-999999">historical</a>
</div>

使用类字符串并使用Javascript添加内联CSS

3 个答案: