为什么 jQuery 将 hsl() 替换为 rgb()？

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>

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 呈现。

为什么 jQuery 将 hsl() 替换为 rgb()？

Why jQuery replaces hsl() with rgb()?

hsl

rgb

jquery

background-color