如何增加颜色的亮度 jQuery

Question

如何增加 hsl 颜色的亮度（或 l 属性）。

即如果我有一个元素

<div class="myDiv" style="background-color:hsl(240,100%,50%)">My div</div>

如何使用JavaScript或jQuery改变div的亮度。

Answer 1

您可以使用 jquery 更改整个样式属性。请记住，它会替换 style="..." 中的所有内容，并用 myDiv class 替换每个元素，如果您只需要更改一个，请给它一个 id 并定位它。

function myFunction() {
$(document).ready(function () {
 $(".myDiv").css('cssText',"background-color:hsl(240,100%,90%)");
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="myDiv" style="background-color:hsl(240,100%,50%)">My div</div>
 <button onclick="myFunction()">Click me</button>

Answer 2

有多种选择，但这里有一个只改变亮度的选择：

var div = document.getElementsByClassName('myDiv')[0];
var newLightness = '70%';
div.outerHTML = div.outerHTML.replace(/(hsl\(.*?,.*?,).*?(\))/, '' + newLightness + '');

这将只编辑 div 的 outerHTML 的亮度。

说明：由于 w3 的标准，无法从 style 属性中获取 HSL 属性，但 HSL 仍然存在于 DOM 中，因此我们只需替换当前的 div 第 3 个参数对于内联样式的 HSL 函数，我们使用带有捕获组的正则表达式来捕获亮度参数前后的内容，并仅替换亮度。即使该元素具有 HSL 内联样式的内部元素，也只会更改第一个元素，因为正则表达式中未指定 g 标志。

如何增加颜色的亮度 jQuery

How to increase lightness of color jQuery

hsl

jquery