Warum ersetzt jQuery hsl() durch rgb()?

Question

Ich wollte ein paar Spannweiten dynamisch mit hsl Hintergrund-Farbe aufgetragen style-Attribute, wie dies hinzuzufügen:

diese

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

Hier ist mein jQuery tun:

i

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

Aber als Ergebnis bekam Spanne mit rgb() Hintergrundfarbe (auto-konvertiert von hsl()):

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

Hier ist eine Geige: https://jsfiddle.net/pbjcvwdh/5/

Kann jemand erklären, warum ist das und gibt es eine Möglichkeit, diese Auto-Konvertierung zu vermeiden? Wenn ich Hintergrundfarbe statisch in HTML anwende, ändert sich das nicht in rgb().

Answer 1

jQuery hat nichts mit diesem Verhalten zu tun - es ist einfach, weil Browser den Wert im RGB-Format rendern. Sie können es leider nicht ändern. Wenn Sie den Wert im HSL-Format erhalten möchten, müssen Sie ihn zurück von RGB konvertieren. This question kann Ihnen dabei helfen, falls erforderlich.

die oben Um zu beweisen, hier ist eine native JS-Implementierung, die das gleiche Verhalten zeigt:

[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 manipulieren nicht die HTML-Quelle von dem Server empfangen. Es manipuliert die speicherinterne Repräsentation des Dokumentbaums. Als solches wird überhaupt kein HTML (oder CSS in diesem Fall) angezeigt.

Was passiert ist, dass, was auch immer Sie Werkzeug verwenden, um Ihren Code zu debuggen, eine Darstellung dieser In-Memory-Werte implementieren muss. HTML und CSS sind eine naheliegende Wahl, aber beide müssen für Sie neu erstellt werden und hier unterscheiden sich möglicherweise unterschiedliche Implementierungen. Zum Beispiel die Firebug Stil Scheibe macht es konfigurierbar:

(. Mein Firefox lokalisiert ist, aber ich hoffe, Sie bekommen die Idee)

Answer 3

Wenn Sie möchten, dass es in HSL bleibt, verwenden Sie .attr() anstelle von .css():

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

Dabei wird die Seite mit HSL anstelle von RGB gerendert.