jQuery set CSS style of Class by using Data attribute

Question

I've this elements

<div class="circle-200" data-image="pic1" ></div>
<div class="circle-200" data-image="pic2" ></div>
<div class="circle-200" data-image="pic3" ></div>

after the page is loaded i would that the data-image values became the backgound-image of corresponding circle-200 class

Is it possible, using jQuery, do such a thing ?

$('.circle-200').css('background-image', "url('"+$(this).data('img')+"')");

jQuery will take all data-* attributes and add them to the data for the elements. This means that you can access the data-image attribute via $(selector).data("image") (not img) — apokryfos
– apokryfos, Commented Apr 22, 2016 at 15:25

Satpal · Accepted Answer · 2016-04-22 15:23:19Z

3

You need to use .css( propertyName, function )

A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.

Also note it should be image not img

$('.circle-200').css('background-image', function() {
    return "url('" + $(this).data('image') + "')");
});

$('.circle-200').css('background-image', function() {
  return "url('" + $(this).data('image') + "')"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle-200" data-image="pic1">pic1</div>
<div class="circle-200" data-image="pic2">pic2</div>
<div class="circle-200" data-image="pic3">pic3</div>

answered Apr 22, 2016 at 15:23

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery set CSS style of Class by using Data attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related