javascript - 如何将每个 div 背景设置为其内部 HTML

Question

我有

<div class="container">red</div>
<div class="container">green</div>
<div class="container">#eeeeee</div>

我想为其内部 HTML 的每个 div 设置背景颜色就像第一个 div 的背景颜色必须是红色，第二个是绿色。等等

我不想使用 CSS，因为我有超过 50 个 div，所以它在 CSS 中的代码很长我是 javascript 的初学者，有什么方法可以用几行代码来做到这一点。

Answer 1

您可以为此使用 css() 方法:

$('div.container').css('background-color', function() {
    return $(this).text();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">red</div>
<div class="container">green</div>
<div class="container">#eeeeee</div>

原生 JS 版本:

var elements = document.querySelectorAll('div.container');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = elements[i].innerText;
}