Ändern CSS innere Hintergrundfarbe

Question

Ich habe ein kleines Stück 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 

Ich habe versucht, die Hintergrundfarbe unter Code für default_style mit zu ändern. aber das funktioniert nicht, die ID in der Tat: "rect-5115" besteht aus 2 background_color in den folgenden Tags wie oben im Code aufgeführt:

1. default_style
2. mouseover_style

ich brauche um die Hintergrundfarbe für die default_style anstelle der mouseover_style zu ändern, wenn die Button_on geklickt wird.

Ich habe mehrere Möglichkeiten versucht, aber es funktioniert nicht, können Sie mich bitte durch den richtigen Kanal führen.

Danke,

Answer 1

Sie müssen Bindestrich oder Camelcase in CSS-Selektoren für CSS-() -Methode:

Auch kann jQuery die CSS und DOM gleich interpretiert Formatierung von mehr -Worteigenschaften. Beispielsweise versteht und gibt jQuery den richtigen Wert für .css ("background-color") und .css ( "backgroundColor") zurück. Dies bedeutet, dass die Groß-/Kleinschreibung eine besondere Bedeutung hat, z. B. .css ("WiDtH") wird nicht dasselbe tun wie .css ("width").

Answer 2

Bitte versuchen Sie dies:

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

Answer 3

Sie in Ihrer .css() Regel einen Syntaxfehler haben, ist es background-color mit einem Bindestrich statt einem Unterstrich.

Für die Hover-Teile wenden Sie Stile auf die Ereignisse mouseenter und mouseleave an.

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

Answer 4

Hallo Vielen Dank für Ihre Eingaben.

infact Wenn Sie den Code sehen: Es gibt einen Unterstrich in der background_color, das ist ziemlich verwirrend.

die background_color bilden Teil der default_style. das wollte ich mit JS ändern.

"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