Set background with value of data attribute

Question

I've 16 different section-tags. Every section-tag have a data- attribute to set a specific background-color for each section:

<section data-color="#A3D1B5">

Now I want to set this color as the background.

What i've already tried
In this question CSS values using HTML5 data attribute say the answer, it should be possible to set the color like background: attr(data-color); but this won't work for me...

I took a look at jQuery data() but I don't know how to set the background for all of the section-tags.

Any other solutions or tips how to handle this with jQuery data()?

Solution 1

DEMO

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

Solution 2

You have to get the data-color attribute and assign it to the background in the css:

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

Living example: http://jsfiddle.net/Pk5dK/

Solution 3

Try this code,

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

http://jsfiddle.net/ZcPYv/

Comments

[mplungjan]

the question I really would like to ask is why not use a classname?

[Alvaro]

@mplungjan you can do it with both, but attr seems to be faster than data when retrieving the data.

[andyb]

+1, and I would expect just using this.style.backgroundColor = this.getAttribute('data-color'); as the function body to be even quicker.