jquery - 为什么 jQuery 用 rgb() 代替 hsl()？

Question

我想动态添加一些跨度，并将 hsl 背景颜色应用于样式属性，如下所示:

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

这是一个 fiddle :https://jsfiddle.net/pbjcvwdh/5/

谁能解释一下为什么会这样，有什么方法可以避免这种自动转换吗？如果我在 html 中静态应用背景颜色，它不会更改为 rgb()。

Answer 1

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

为了证明上述内容，这里有一个表现出相同行为的原生 JS 实现:

[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);
});

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

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