Good morning, I'm using materialize for the design of my page, I have a function to change the background-color to a div with jquery. The problem I have is that the color does not change because the materialize colors classes come with "! Important", so the function is executed but the color does not change. Any ideas?
Materialize has its color palette and should not be modified, so bring the !important .
I recommend you change the color of div by changing the class of the color you want, not modifying the attribute background-color .
If you want to change the color you just have to create your own styles and just like Materialize add the tag! important.
As you see in the example, first I add a red color with the Materialize classes and then change with the JQuery the classes red by myclassColor2.
PDT: You do not necessarily have to remove the Materialize class, with adding your custom classes with the aforementioned tag is enough for them to prevail over those of Materialize, I removed the classes from the network to do it dynamically.
I hope you find it useful.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<style>
.div {
height: 200px;
}
.myclassColor{
background-color: #198c52 !important;
}
.myclassColor2{
background-color: #19fc59 !important;
}
</style>
<script>
$(document).ready(function () {
$('#btn1').click(function () {
if ($('#div1').hasClass('red')) {
$('#div1').removeClass('red');
$('#div1').addClass('myclassColor');
} else {
$('#div1').removeClass('myclassColor');
$('#div1').addClass('red');
}
})
$('#btn2').click(function () {
if ($('#div2').hasClass('red')) {
$('#div2').removeClass('red');
$('#div2').addClass('myclassColor2');
} else {
$('#div2').removeClass('myclassColor2');
$('#div2').addClass('red');
}
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s6 div red" id="div1"></div>
<div class="col s6 div red" id="div2"></div>
</div>
<input type="button" id="btn1" value="CAMBIAR COLOR DIV #1">
<input type="button" id="btn2" value="CAMBIAR COLOR DIV #2">
</div>
</body>
</html>