根据javascript中属性值的样式元素

问题描述：

我打算使用相同的XHTML5文件进行数据存储和显示。在设计时，该文件将在浏览器中查看。在编译时，它将被解析以生成UI内容。根据javascript中属性值的样式元素

我想存储颜色数据作为一些列表项的属性。然后，当页面被加载时，来自这些列表项目的颜色数据应该被“转移”为该项目的背景颜色，以便我可以在浏览器中可视地检查颜色，并且可以容易地解析该十六进制字符串来自XHTML。

我已经有（只有一个各部分的线）：

(...) 
<body> 
    <ul> 
     <li data-color="#ffeeaacc">EMG</li> 
    </ul> 
    <script> 
     $('a[data-color]').?????? 
    </script> 
</body>

我非常非常的n00b在JavaScript和jQuery，并不能找出我应该从现在就做。最终的结果应该是等同于：

<li data-color="#ffeeaac" style="background: #ffeeaacc">EMG</li>

谢谢！

答

#ffeeaacc不是有效的HEX颜色。 HEX颜色只包含三对两位数字，而不是四位。

$('*[data-color]').each(function(i, e){ 
    $(e).css('background-color', $(e).data('color')); 
});

不错。没有意识到jQuery使用.data（）方法处理data- *属性。 +1 – 2012-03-20 16:22:43

我认为这是最正规的答案（它工作得很好），并且还提到了我的错误（我来自rgba世界...） – heltonbiker 2012-03-20 16:28:00

很高兴为您提供帮助。（如果你想使用RGBA颜色，这也应该工作：http://jsfiddle.net/CQqRX/3/。用最新的浏览器） – Alex 2012-03-20 16:31:09

答

这应该工作：

$('li[data-color]').each(function() { 
    $(this).css('background-color', $(this).attr('data-color')); 
});

答

CYOU应该使用类似的东西：

jQuery('li[data-color]').each(function() { 
    jQuery(this).css({'background-color':jQuery(this).data('color')}); 
});

你将不得不使用这个曾经DOM加载

请阅读[编辑帮助]（http://*.com/editing-help）页面，了解如何格式化您的答案。 – 2012-03-20 16:22:46

Thx用于编辑，我在做同样的工作:) – haltabush 2012-03-20 16:22:50

如果JavaScript位于HTML源代码之后，则不必等到DOM完全加载。 – Alex 2012-03-20 16:28:09

答

这应该对以前提供依靠2件事你 http://jsfiddle.net/zrARP/

$('li[data-color]').each(function(){ 
    var color = $(this).data("color"); 
    $(this).css('background-color',color); 
})

答

所有的答案工作正常：

我很感激你的兴趣，但实际上我想要的是以前答案提供的行为。无论如何，我可能会回来看看这些更普遍的做法。谢谢！ – heltonbiker 2012-03-20 16:46:15