[英]Changing CSS inner Background color
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 . 我尝试使用下面的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:
但这不起作用,实际上ID:“ rect-5115”由以下代码中的2个background_color组成,如上面的代码中所列:
i need to change the background color for the default_style rather than the mouseover_style when the Button_on is clicked. 单击Button_on时,我需要更改default_style的背景颜色,而不是mouseover_style 。
$(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, 谢谢,
请尝试以下方法:
$('#rect-5115').css('background-color','#ff0000');
You have a syntax error in your .css()
rule, it's background-color
with a hyphen instead of an underscore. 您的
.css()
规则中有语法错误,它是带有连字符而不是下划线的background-color
。
For the hover parts, apply styles to the mouseenter
and mouseleave
events. 对于悬停部件,将样式应用于
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>
You have to use hyphen or camelCase in css selectors for .css() method: 您必须在.css()方法的css选择器中使用连字符或camelCase:
Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties.
同样,jQuery可以平等地解释多字属性的CSS和DOM格式。 For example, jQuery understands and returns the correct value for both .css( "background-color" ) and .css( "backgroundColor" ).
例如,jQuery理解并返回.css(“ background-color”)和.css(“ backgroundColor”)的正确值。 This means mixed case has a special meaning, .css( "WiDtH" ) won't do the same as .css( "width" ), for example.
这意味着混合大小写具有特殊含义,例如,.css(“ WiDtH”)与.css(“ width”)的作用不同。
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. 实际上,如果您看到代码:background_color中有一个下划线,这很令人困惑。
the background_color form part of the default_style . background_color表单是default_style的一部分。 this is what i wanted to change using JS.
这就是我想使用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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.