改变CSS内背景颜色

我有一个小片的代码改变CSS内背景颜色

"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： “矩形-5115”，在以下标记由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'); 
     }); 
    });

我尝试了几种方法来做到这一点，但它不工作，请你引导我通过正确的渠道。

感谢，

来源

2016-12-12 user2095196

你必须使用CSS选择器的CSS连字符或驼峰（）方法：

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

来源

2016-12-12 09:59:42

请试试这个：

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

来源

2016-12-12 09:55:34

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

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

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

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

来源

2016-12-12 09:57:55 Roberrrt

您好，感谢您的输入。 – user2095196

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

事实上，如果你看到代码：在background_color中有一个下划线，这是相当令人费解的。

的default_style的BACKGROUND_COLOR一部分。这是我想用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

来源

2016-12-12 10:27:40 user2095196

改变CSS内背景颜色

回答

相关问题