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：＆＃34; rect-5115＆＃34;由以下代码中列出的以下标记中的2个background_color组成：

default_style
mouseover_style

单击 Button_on 时，我需要更改 default_style 的背景颜色，而不是 mouseover_style 。

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

我尝试了几种方法，但它不起作用，请你引导我通过适当的渠道。

谢谢，

Answer 1

请试试这个：

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

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你必须在.css（）方法的css选择器中使用连字符或camelCase：

此外，jQuery可以同样解释CSS和DOM格式多字属性。例如，jQuery理解并返回 .css（“background-color”）和.css的正确值（ “背景颜色” ）。这意味着混合案例具有特殊含义，例如，.css（“WiDtH”）与.css（“width”）的作用不同。

Answer 4

您好，非常感谢您的投入。

实际上，如果你看到代码：background_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

更改CSS内部背景颜色

4 个答案: