How can i set my background color through HTML5 getItem?

Question

Im using this code:

$(this).css('backgroundcolor', localStorage.getItem('bgColorr') + " !important;");

When i write:

alert( localStorage.getItem('bgColorr') + " !important;");

It gives me the proper alert, rgb(243,102,42) !important; ....

Really getting to me.. thanks guys!

edit:

Surrounding code:

$(function() {
    $(this).css('background-color', localStorage.getItem('bgColorr'));
});

var colorOptions = '#000, #fff, #abf7ae, #f6cbe9, #53c68f, #53c1c6, #538dc6, #c6536b'.split(', '),
    colorDivs = [],
    colorsContainer = $('#colorsContainer');

for ( var i = 0, len = colorOptions.length; i < len; i++ ) {
    var div = $('<div />').css('background', colorOptions[i])[0];
    colorDivs.push(div);
}

colorsContainer.append(colorDivs);

$('#header').hover(function() {
    colorsContainer
    .fadeIn(200)
    .children('div')
        .click(function() {
            $('body').css('background', $(this).css('backgroundColor'));
            localStorage.setItem('bgColorr', $(this).css('backgroundColor'));
        });
}, function() {
    colorsContainer.fadeOut(200);
});

There you go, thanks guys

Answer 1

• Use 'background-color' instead of 'backgroundcolor'.
• Remove the !important. You can't set this property from Javascript.
• You shouldn't put the semicolon at the end of the value.

---

Update:

In addition to the above, it seems that this is not an HTML element. You need to use a proper selector here, e.g. $('#someid') to select the element with id='someid'. If you want to change the body background, use $('body').

To summarize, you should be left with:

$('body').css('background-color', localStorage.getItem('bgColorr'));

Answer 2

Your problem is not in getItem or anything, but the capitalization of your CSS property name. It's backgroundColor, not backgroundcolor.