使用jquery获取来自文件的CSS数据

我希望jQuery从css类中选择background-color，该类不在文档中（尽管hover使用相同的颜色）。使用jquery获取来自文件的CSS数据

这是我目前得到的代码：

<a id='changetext1'> 
    <div class='tile color_red1'>text</div> 
</a> 
<a id='changetext2'> 
    <div class='tile color_orange1'>text</div> 
</a> 
<div class='rightside color_red2' id='rightside'>some more text</div>

的rightside开始了为color_red2，但我想它更改为color_orange2上单击color_orange1div。当点击红色div时，当然可以将其更改为color_red2。

文本和颜色来自于SQL数据库和投入使用jQuery的JSON

function rightSideData(data) { 
    $.each(data, function(i, d) { 
     $("#changetext" + d.id).on('click', function() { 
     //Change the background color to match the :hover color of the right div TODO 
     }); 
    } 
});

的部分与切换文字工作得很好，我被困在改变background-color财产。颜色可以从JSON数据（d.color）中检索，但我无法弄清楚如何从css文件中获取.color_orange2background-color。

编辑：该解决方案如下：

var color = window.getComputedStyle($(".color_"+d.color+"1").get(0),':hover').getPropertyValue('background-color'); 
$('.color_red2').css("background-color",color);

来源

2013-05-21 Friso van Dijk

两种选择：要么利用从JSON对象检索值的开关状态，或者，使用jQuery来创建一个''，然后将它附加到头部。 – Ohgodwhy

据我所知，你不能直接访问你的CSS。 jQuery的交互仅限于对DOM元素进行操作（例如设置，检索，删除类属性）。 –

您可以尝试使用getComputedStyle来评估divs的类。我认为像

var color = window.getComputedStyle($('.color_red1').get(0),':hover').getPropertyValue('background-color');

有可能会工作...

来源

2013-05-21 20:08:41 rocky

这个效果非常好，我用代码中的答案更新了问题 –

好听那只是一个盲目的拍摄:)没有尝试过。 – rocky

你能只是没有使用jQuery的addClass（ 'color_orange2'）和removeClass（ 'color_red2'），以获得您想要的结果呢？

此外，您可以在CSS中拥有：hover和：active，因此如果更改只是在用户单击时才能看到，您甚至不必使用JQuery。但如果你想要永久性的，我建议你只需要改变课程。

来源

2013-05-21 20:08:04

修正了这个问题，但是我的代码很sl（（因为我有5种不同的颜色，这意味着5次removeClass（），有什么建议吗？ –

使用jquery获取来自文件的CSS数据

回答

相关问题