How can I use inline style with data attribute and browser prefix using jquery

Question

 $(".flex-container").css('justify-content', function(){ $(this).css('justify-content',$(this).data("justify-content")); }); 

 .flex-container{ display:flex; display:-webkit-flex; /**-webkit-justify-content: space-between; **/ /** justify-content: space-between; **/ -webkit-align-items: center; height:300px; width:400px; margin:0 auto; border:1px solid #d9d9d9; } .flex-item{ width:100px; height:200px; border:1px solid #eee; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="flex-container" data-justify-content="space-between"> <div class="flex-item">Flex Item one</div> <div class="flex-item">Flex Item two</div> <div class="flex-item">Flex Item three</div> </div> 

This code is good working but how can I add browser prefix (-webkit-justify-content: space-between; with justify-content: space-between;) using jquery

Answer 1

You can use the jQuery .css() method

$('.flex-container').css({'-webkit-justify-content':'space-between',
                          'justify-content':'space-between'})

EDIT:

Based on your comments i think this is what you are looking for, basically you need to loop through all of the elements and assign it that way

$('.flex-container').each(function(){
    var justify = $(this).data('justify-content');
    $(this).css({'justify-content':justify,
                 '-webkit-justify-content':justify}})
})