为什么jQuery用rgb（）替换hsl（）？

Question

我想动态地添加一些跨度，并将hsl background-color应用于样式属性，如下所示：

<span style="background-color: hsl(190, 75%, 43%)"></span>

这是我的jQuery这样做：

var hues = [ 172, 178, 184, 190, 196, 202, 208 ];

$.each(hues, function(index, backgroundHue) {
    var newSpan = $('<span></span>');
    newSpan.css('background-color', 'hsl('+backgroundHue+', 75%, 43%)');
    someBlock.append(newSpan);
});

但结果我得到了 rgb（）背景颜色（从 hsl（）自动转换）：

<span style="background-color: rgb(27, 165, 192);"></span>

这是一个小提琴：https://jsfiddle.net/pbjcvwdh/5/

任何人都可以解释为什么会这样，有没有办法避免这种自动转换？如果我在html中静态应用background-color，它不会更改为rgb（）。

Answer 1

jQuery与此行为无关 - 它只是因为浏览器以RGB格式呈现值。不幸的是，你无法改变它。如果要获取HSL格式的值，则需要将其从RGB转换回来。如果需要，This question可以帮助您。

为了证明上述情况，这里有一个表现出相同行为的原生JS实现：

＆＃13;

＆＃13;

[172, 178, 184, 190, 196, 202, 208].forEach(function(backgroundHue) {
  var span = document.createElement('span');
  span.style.backgroundColor = 'hsl(' + backgroundHue + ', 75%, 43%)';
  document.querySelector('.add-em-here').appendChild(span);
});

＆＃13;

.add-em-here span {
  display: inline-block;
  height: 40px;
  width: 40px;
  border: 2px solid white;
  margin-left: 6px;
}

＆＃13;

<div class="add-em-here">
  <!-- Added statically - stays with hsl() -->
  <span style="background-color: hsl(60, 75%, 43%)"></span>

  <!-- Added dynamically - auto-replaced with rgb() -->
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

jQuery不会操纵服务器收到的源HTML。它操纵文档树的内存中表示。因此，根本没有HTML（或者在这种情况下是CSS）。

无论您使用何种工具调试代码，都必须实现这些内存中值的表示。 HTML和CSS是常见的明显选择，但它们都需要为您重新创建，而这里的不同实现可能会有所不同。例如，Firebug的 Style 窗格使其可配置：

（我的Firefox是本地化的，但我希望你明白这一点。）

Answer 3

如果您希望它保留在HSL中，请使用.attr（）而不是.css（）：

newSpan.attr('style', 'background-color:hsl('+backgroundHue+', 75%, 43%)');

这样，页面将使用HSL而不是RGB进行渲染。