更改CSS内部背景颜色

Question

我有一点代码

"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

我尝试使用以下代码来更改背景颜色，以 default_style 。但这实际上是行不通的，实际上ID：" RECT-5115"由以下代码中列出的以下标签中的2个背景_Color组成：

1. default_style
2. Mouseover_style

我需要更改> default_style 的背景颜色，而不是单击 MOUstrong> MOUstrong> MOUstrong> 时，请单击 button_on 。

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

我尝试了几种方法，但它不起作用，您能指导我通过适当的频道。

谢谢，

Answer 1

您必须在CSS选择器中使用连字符或骆驼作为.css（）方法：

另外，jQuery可以同样解释CSS和DOM格式 多字属性。例如，jQuery了解和返回 .css（"背景色"）和.css的正确值（ "背景颜色" ）。这意味着混合情况具有特殊的含义， .css（" width"）不能与.css（" width"）相同。

Answer 2

您的.css()规则中有语法错误，它是带有连字符而不是下划线的background-color。

对于悬停零件，将样式应用于mouseenter和mouseleave事件。

$(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

请尝试：

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

Answer 4

你好，非常感谢您的输入。

Infact如果您看到代码：背景_Color中有一个下划线，这很令人困惑。

background_color 构成 default_style 的一部分。这就是我想使用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