Как увеличить яркость цвета jQuery - PullRequest
Новая
       56

Как увеличить яркость цвета jQuery

0 голосов
/ 12 апреля 2020

Как увеличить яркость (или свойство l) цвета hsl.

Ie, если у меня есть элемент 

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

Как мне используйте JavaScript или jQuery, чтобы изменить яркость div.

Ответы [ 2 ]

0 голосов
/ 12 апреля 2020

Есть несколько вариантов, но вот тот, который изменяет только яркость: 

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

Это отредактирует только яркость на внешней стороне div HTML.

Объяснение: HSL свойство не может быть выбрано из атрибута style из-за стандартов w3, но HSL все еще присутствует в DOM, поэтому мы просто заменим текущий 3-й параметр div на функцию HSL во встроенном стиле, мы используем регулярное выражение с захватом групп для поймать то, что идет до и после параметра легкости, и тем самым заменяя только легкость. Даже если у элемента есть внутренние элементы со встроенным стилем HSL, будет изменен только первый, поскольку в регулярном выражении не был указан флаг g.

0 голосов
/ 12 апреля 2020

Вы можете изменить весь атрибут стиля с помощью jquery. Имейте в виду, что он заменяет все внутри style = "..." и для каждого элемента с классом myDiv, если вам нужно изменить только один, присвойте ему идентификатор и укажите его. 

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