I need help with changing the background color of a specific .div element when it is clicked on. I want the color to be a variable that can be changed by the user, and this change should occur when the document is ready.
Currently, I am using a CSS variable called '--main-color' for this purpose, but I am struggling to find a jQuery solution that involves using '$(this)'.
Is there a way to apply a custom CSS property or variable with a .click() function in jQuery?
$(document).ready(function(){
// CREATE GRID
for (i = 0; i<1152; i++) {
var board = document.createElement('div');
board.className = 'grid';
board.addId = 'color'
document.getElementById('container').appendChild(board);
};
// END CREATE GRID
// HOVER AND CLICK FUNCTION //
$('#color-picker').colorpicker().on('changeColor', function(ev){
var choice = ev.color.toHex();
document.body.style.setProperty('--main-color', choice);
});
$('.grid').hover(function(){
$(this).click(function(){
$(this).css('background-color', 'var(--main-color)');
});
});
// END HOVER AND CLICK FUNCTION
});body {
background-color: #222;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Patua One', cursive;
color: #FFF;
--main-color: #000;
}
*{
background-color: #222;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Patua One', cursive;
color: #FFF;
}
#title {
font-family:'Revalia', cursive;
font-size: 3em;
color: #FFF;
text-align: center;
}
.menu {
float:left;
clear: left;
width: 300px;
margin-top: 5%;
margin-left:5%;
}
#container {
height: 800px;
width: 800px;
border: 1px solid #424242;
margin-left: 30%;
margin-top: 5%;
background-color: #FFF;
}
.grid {
height: 20px;
width: 20px;
border: 1px dotted #424242;
background-color: #FFF;
display: inline-grid;
}
div.grid:hover{;
background-color: var(--main-color);
}
.active {
background-color: var(--main-color);
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #FFF;
background-color: #222;
background-image: none;
border: 1px solid #F85658;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}