What is the way to change the background color using HTML5 getItem?

Here is the code I am currently using:

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

When I execute this:

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

I receive the correct alert which is rgb(243,102,42) !important; ....

This issue is really bothering me.. thank you for your help!

Edit:

The surrounding code snippet is as follows:

$(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);
});

That should do it, thanks everyone!

Answer №1

  • Instead of using 'backgroundcolor', try using 'background-color'.
  • Avoid using !important, as it cannot be set via JavaScript.
  • Do not include a semicolon at the end of the property value.

Update:

Furthermore, it appears that this is not an HTML element. Make sure to use a proper selector such as $('#someid') for selecting elements with specific IDs. If you wish to change the body background, use $('body').

To sum up, your final code should look like this:

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

Answer №2

The issue lies not in the getItem function or any other part of your code, but rather in the capitalization of the CSS property name. The correct spelling is backgroundColor, not backgroundcolor.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Virtual Tour Engine for iOS Devices

Seeking recommendations on how to develop an offline 3D virtual tour app for iOS. Are there any specific engines or libraries that can facilitate this? Hotspot and audio file support is necessary. Appreciate any guidance. ...

Styling multiple checkbox items in an Angular Material Autocomplete

Is there a way to adjust the height of autocomplete multiple checkbox items in Angular Material? I'd like it to look like this With a line item height of 18px But instead, it looks like this when using multiple checkboxes With a different checkbox ...

Is there a way to set the focus on a text box automatically when a page is loaded, even without support for JavaScript?

On my form, I have a few text fields and I am looking to automatically set the cursor (auto focus) on the first text field when the page loads. I aim to accomplish this without relying on javascript. ...

Incorporate a line break between the day and month on your JQuery datepicker

Is it possible to insert a line break or some other element between the day and month in the input field when using JQuery datepicker? Here is the current code I have: jQuery('#checkin').datepicker({ showAnim: "drop", dateFormat ...

Encountered a parsing error when attempting to integrate SCSS with webpack and babel setup

I am facing an issue while trying to integrate SCSS into my webpack and babel setup. When running npm run build, I encounter an error that I'm unfamiliar with. As a beginner in using webpack and babel, I'm unsure about the necessary changes requ ...

Tips for arranging a group of objects based on a nested key within each object

i have a collection of objects that I need to sort based on their id. here is the information: { 1918: { id: "1544596802835", item_id: "1918", label: "Soft Touch Salt Free Mint 500 ml (000001400045)", combo_items: false } 6325: { ...

Production environment experiencing issues with jQuery tabs functionality

Currently, I have implemented jQuery tabs on a simple HTML page. The tabs are functioning correctly and smoothly transitioning between different content sections. However, upon integrating this setup into my actual project environment, I encountered an is ...

IE9 users are redirected to an ajax action when using Fancybox

I am currently experiencing an issue with using Fancybox in Magento admin, where everything works fine except for Internet Explorer 9. When I try to feed my fancybox by ajax, the link looks like this: <a class="fancybox fancybox.ajax" href="http://10.1 ...

Tips for fixing the position without affecting the width

I'm trying to figure out how to keep my #header fixed in position without it expanding in width. Despite checking my code multiple times, I can't seem to identify the factor causing my header to become wider and shift downwards unexpectedly. I in ...

The AngularJS model does not reflect changes after I make edits in the editor

Currently, I am utilizing Jhtmlarea and have created a custom directive as follows: test.directive('jhtml', function () { return { restrict: 'A', replace: false, link: function (s ...

Tips on ensuring Angular calls you back once the view is ready

My issue arises when I update a dropdown list on one of my pages and need to trigger a refresh method on this dropdown upon updating the items. Unfortunately, I am unsure how to capture an event for this specific scenario. It seems like enlisting Angular ...

Make sure to close all your tags properly in PHP

Within my <textarea>, I am giving users the ability to submit content. The specific tags I want to allow include <b>, <i>,<blockquote>, and <del>. In order to prevent any unclosed tags since this content will be displayed on t ...

Fill in a DropDown/Select menu according to the selection made in a separate DropDown menu

As a novice developer, I have encountered a challenge that has me stumped. My tech stack includes ASP.NET MVC with C# and some javascript technologies like JQuery and JSON. The task at hand involves populating a dropdown based on the selection made in ano ...

What could be causing the flex item to be wider than its container?

One issue that can arise when utilizing flexbox is the scenario where, as demonstrated below, the content exceeds the width of the viewport causing the flexbox items to become wider than their container. What are the factors contributing to this situat ...

The functionality of the jQuery plugin for displaying a div element is ineffective unless an alert is placed in

I'm puzzled by this situation. I've been working on a jQuery plugin to retrieve data from my MongoDB database and display it back. Here's a snippet of the code... (function() { var result1; var image1; $.fn.showRecs = function() { var ...

Pressing a shortcut key will direct the focus to the select tag with the help of Angular

I was trying to set up a key shortcut (shift + c) that would focus on the select tag in my form when pressed, similar to how tab works. Here is the HTML code for my form's select tag: <select id="myOptions"> <option selected> Opti ...

Styling elements conditionally with AngularJS-controlled CSS

Looking for some guidance in Angular as a newcomer. I am attempting to adjust a style when clicked. On my page, I have multiple content spaces created using the same template. Upon clicking a "more" link, I desire to expand that specific section. I have ac ...

`Thoughts on Difficulty Attaching Child Elements in JavaScript with appendChild`

I am having trouble with appending some HTML that is being received as a string in a div. For some reason, the appendChild method is not working as expected. Here is my JavaScript code: var doc = document.getElementById("products"); var notes = doc.getEle ...

Storing HTML elements in a database using jQuery's html() method

I have encountered a dilemma that has left me stumped after extensive online research. I have a dynamically generated webpage and need to save the entire appended body of the page to a database using PHP and MySQL. My current approach involves using the fo ...

What is the best way to send an object to Vue Component?

How can I properly call a Vue Component with a data object? The todo-item tag works as expected, but the todo-item2 tag does not produce any output. I was expecting the same result. Here is the HTML code: <div id="app"> <todo-item v-bind:te ...