Changing CSS inner Background color

Question

I got a little piece of code

"spots": [{
    "id": "rect-5115",
    "type": "rect",
    "x": 8,
    "y": 52.7,
    "width": 34.6,
    "height": 16.7,
    "default_style": {
        "border_radius": 10,
        "background_color": "#c0c0c0",
        "background_opacity": 0.18943843984962405
    },
    "mouseover_style": {
        "border_radius": 10,
        "background_color": "#c0c0c0",
        "background_opacity": 0.18943843984962405,
        "fill": "#000000"
    },
    "tooltip_style": {
        "auto_width": 1

I tried to change the background color using below code for default_style . but this is not working, in fact the ID: "rect-5115" consist of 2 background_color in the following tags as listed in the code above:

1. default_style
2. mouseover_style

i need to change the background color for the default_style rather than the mouseover_style when the Button_on is clicked.

    $(document).ready(function(){
        $('#Button_on').click(function(){
            $('#rect-5115').css('background_color','#ff0000');
        });
    });

I tried several ways to do so but its not working, can you please guide me through the proper channel.

Thanks,

Answer 1

请尝试以下方法：

$('#rect-5115').css('background-color','#ff0000'); 

Answer 2

You have a syntax error in your .css() rule, it's background-color with a hyphen instead of an underscore.

For the hover parts, apply styles to the mouseenter and mouseleave events.

 $(document).ready(function(){ $('#Button_on').click(function(){ $('#rect-5115').css('background-color','#FF0000'); $("#rect-5115").mouseenter(function() { $(this).css("background", "#00FF00"); }).mouseleave(function() { $(this).css("background", "#FF0000"); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="Button_on">button</button> <div id="rect-5115">hello</div> 

Answer 3

You have to use hyphen or camelCase in css selectors for .css() method:

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css( "background-color" ) and .css( "backgroundColor" ). This means mixed case has a special meaning, .css( "WiDtH" ) won't do the same as .css( "width" ), for example.

Answer 4

Hello Thanks a lot for your inputs.

infact if you see the code: there is an underscore in the background_color, this is quite puzzling.

the background_color form part of the default_style . this is what i wanted to change using JS.

"spots": [{
    "id": "rect-5115",
    "type": "rect",
    "x": 8,
    "y": 52.7,
    "width": 34.6,
    "height": 16.7,
    "**default_style**": {
        "border_radius": 10,
        **"background_color": "#c0c0c0",**
        "background_opacity": 0.18943843984962405
    },
    "mouseover_style": {
        "border_radius": 10,
        **"background_color": "#c0c0c0",**
        "background_opacity": 0.18943843984962405,
        "fill": "#000000"
    },
    "tooltip_style": {
        "auto_width": 1