Почему 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> 

Вот скрипка: https://jsfiddle.net/pbjcvwdh/5/

Может кто-нибудь объяснить, почему это так и есть ли способ избежать этого автоматического преобразования? Если я использую background-color static в 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 делает его настраиваемым:

(. Мой Firefox локализован, но я надеюсь, что вы получите идею)

Answer 3

Если вы хотите, чтобы он остался в HSL, используйте .attr() вместо .css():

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

При этом страница будет отображать с помощью HSL вместо RGB.