Question

我有多个类别为.hours的元素，它们都具有带有十六进制值的color属性，例如：<div class="hours" color="#FFFFFF">。

如何使用jQuery分别设置所有元素的背景颜色，以使上方的元素具有颜色#FFFFFF，而元素<div class="hours" color="#666666">的背景颜色为#666666？ / p>

我的尝试：$('.hours').css('background-color', this.attr.color);

Answer 1

尝试

$('.hours').each(function(){
   var t = $(this);   
    t.css('background-color', t.attr('color'));      
  });
})

Answer 2

纯JS解决方案（在我看来，此jQuery相当无效...）：

document.querySelectorAll('.hours').forEach(function(el) {
    el.style.backgroundColor = el.getAttribute('color');
});

Answer 3

您可以使用.each来引用每个元素及其color属性

$('.hours').each(function() {
  let elem = $(this);
  elem.css('background', elem.attr('color'));
});

.hours {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hours" color="#FFFFFF"></div>
<div class="hours" color="#AAAAAA"></div>
<div class="hours" color="#444444"></div>

Answer 4

$(".hours").each(function(){
  let $this= $(this); 
  let color=$this.attr("color");
  $this.css("background-color", color);      
});

Answer 5

并不是您真正要求的，但是没有JS也可以实现，只需使用纯CSS和自定义属性即可：

<div style="--color: green"></div>

div {
  --color: #e2001a; /* default color */
  background-color: var(--color);
  height: 40px;
}

示例：http://jsfiddle.net/e1fwtcdz/1

如何基于自定义属性为具有相同类的所有元素分别设置背景颜色

5 个答案: