SO Help: Change DIV background color with .click
HTML
<div id="div4" class="testDIV">Click to increase height</div>
CSS
div {
background-color: green;
text-align: center;
}
JavaScript
function writeStyles(styleName, cssText) {
var styleElement = document.getElementById(styleName);
if (styleElement) document.getElementsByTagName('head')[0].removeChild(
styleElement);
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = styleName;
styleElement.innerHTML = cssText;
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
function changeHeight() {
var cssText = '.testDIV{ height:' + height + 'px !important; }';
writeStyles('styles_js', cssText)
}
var height = 50;
$("#div4").on("click", function() {
height = height + 10;
changeHeight();
});
changeHeight();