使用数据属性的值设置背景

Question

我有16个不同的section - 标签。每个section - 代码都有一个data-属性，可为每个section设置特定的背景颜色：

<section data-color="#A3D1B5">

现在我想将此颜色设置为背景。

我已尝试过的内容
在这个问题中CSS values using HTML5 data attribute说出答案，应该可以设置像background: attr(data-color);这样的颜色，但这对我不起作用......

我看了jQuery data()，但我不知道如何设置所有section - 代码的背景。

如何使用jQuery data()处理此问题的任何其他解决方案或提示？

Answer 1

DEMO

$("section").css('background', function () { //or for code's consistency, i'd use background-color instead
    return $(this).data('color')
});

Answer 2

试试这段代码，

$("section").each(function(){
    $(this).css('background',$(this).data('color'));
});

http://jsfiddle.net/ZcPYv/

Answer 3

您必须获取data-color属性并将其分配给css中的background：

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

活生生的例子：http://jsfiddle.net/Pk5dK/

Answer 4

试试这个： - http://jsfiddle.net/adiioo7/JgfkY/

<强> JS： -

jQuery(function($){
    $("#section").css("background-color",$("#section").attr("data-color"));
});

<强> HTML： -

<section id="section" data-color="#A3D1B5">Section with custom color</section>