Получить цвет DIV в шестнадцатеричном формате JQuery
Это мой код:
function getTraits(trait) {
$("#"+trait).on("click", function() {
alert($(this).css('backgroundColor'));
if (toHex($(this).css('background-color')) != highlightedColor) {
$("#"+trait).css("background-color", highlightedColor);
// If the element isn't highlighted, highlight it.
} else {
$(this).css("backgroundColor", defaultColor);
}
})
}
Я пытаюсь переключить выделение на div при щелчке пользователя. Я хотел бы получить цвет фона div, потому что было бы неэффективно хранить логический переключатель для каждого div. Итак, мне нужна функция toHex(rgb). Я видел много таких на SO, поэтому попытался использовать их, но ни один из них не работал. alert(), который я поставил, чтобы показать формат, который возвращает JQuery, дал мне rgba(0,0,0,0). Я попытался изменить регулярное выражение, которое нашел следующим образом:
var rgb = rgb.match(/^rgba((\d+),\s*(\d+),\s*(\d+))$/);
Это не сработало с TypeError: rgb is null.
Спасибо за любую помощь, которую вы можете мне оказать!
Вместо этого вы можете рассмотреть возможность использования класса CSS для переключения цвета фона.
@FZs Извините, я допустил опечатку. var rgb = rgb ...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я знаю, это не ответ на ваш вопрос, но рассматривали ли вы вариант jQuery toggleClass()?
Определите класс CSS highlighted:
DIV.default { background-color: whitesmoke; }
DIV.highlighted { background-color: yellow; }
а затем, когда пользователь щелкает ваш DIV:
function getTraits(trait) {
$("#"+trait).on("click", function() {
// Toggle both classes so as to turn one "off"
// and the other "on"
$(this).toggleClass('default');
$(this).toggleClass('highlighted');
// Ensure we have at least one class (default)
var hasOne = $(this).hasClass('highlighted') || $(this).hasClass('default');
if (!hasOne) {
$(this).addClass('default');
}
})
}
Это работает очень хорошо, но не могли бы вы сделать это без !important? По моему опыту, мой код становится невозможно прочитать, когда я вставляю слишком много !important.
Конечно, теперь мы переключаем оба класса и проверяем, имеет ли DIV хотя бы один класс, если возникнет какое-то состояние, когда оба класса будут отключены.
Твоя проблема: jquery вернет rgba(0, 0, 0, 0), если цвет фона не задан (т.е. это undefinied / null). Проблема в том, что вы пытаетесь разобрать неопределенную строку rgb в шестнадцатеричный преобразователь.
Я добавил предложение в преобразованный из здесь, чтобы он возвращал белый цвет, если значение не установлено, но это потребует раскомментирования и не рекомендуется.
Рекомендуемое решение - использовать toggleClass, см. Демонстрацию ниже, где показано, как можно переключать выделение отдельных элементов или целых деревьев DOM.
Демонстрация выпуска rgb
// Cycle through each div
$("#example-wrap div").each(function() {
// Store rgb color
var rgb = $(this).css('backgroundColor');
// Print rgb color to the div
$(this).append( ": " + rgb);
// Append the hex value
$(this).append(" -> " + rgb2hex(rgb));
});
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
// Check if rgb is null
if (rgb == null ) {
// You could repalce the return with a default color, i.e. the line below
// return "#ffffff"
return "Error";
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}#example-wrap div {
border: 1px solid black;
width: 100%;
height: 50px;
color: black;
}
#example-wrap .background-blue {
background: blue;
color: white;
}
#example-wrap .background-white {
background: white;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "example-wrap">
<div id = "background-set" style = "background-color: red; color: white;">Background set in 'style' attribute</div>
<div id = "background-class" class = "background-blue">Background set to blue via class</div>
<div id = "background-class" class = "background-white">Background set to white via class</div>
<div id = "background-none">No background set</div>
</div>Выделить через Toggle Class
Этот пример позволяет вам выделять отдельные элементы с тегами .highlightable, а также применять оболочки, которые означают, что все их дочерние элементы могут быть выделены через класс .highlightable-wrapper.
// Add click event to highlightable elements and wrappers
$(document).on("click", ".highlightable, .highlightable-wrapper *", function(e) {
// Toggle highlight class
$(this).toggleClass("highlight-me");
// Stop click event from propogating (i.e. allow spans to be highlighted individually)
// Uncomment this if you want propogation
e.stopPropagation()
});.highlight-me {
color: blue;
}
.highlightable-wrapper .highlight-me, .highlightable-wrapper .highlight-me * {
color: red;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "example-wrapper">
<div class = "highlightable">
<h4>Individual Element Example</h4>
This is an exampled of a div with the .highlightable class.
</div>
<hr style = "margin: 20px 0px;">
<div class = "highlightable-wrapper">
<h4>Wrapper Example</h4>
<p>I am a paragraph within an element with the .highlightable-wrapper class.</p>
<p>Click us to see us change <strong>I am a strong span, you can individually highlight me</strong>.</p>
</div>
</div>Прежде всего, получите Background-Color и используйте приведенную ниже функцию, чтобы преобразовать его в HEX Value.
var rgb=$(selector).css('background-color');
var hexColor=rgb2hex(rgb);
function rgb2hex(rgb) {
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? "#" +
("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
}
Что такое переменная
rgb?