Question

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这段代码很好用，但是如何使用jquery

添加浏览器前缀（-webkit-justify-content：space-between; with justify-content：space-between;）

Answer 1

您可以使用jQuery .css()方法

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

编辑：

基于你的评论，我认为这就是你要找的东西，基本上你需要循环遍历所有元素并以这种方式分配

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

如何使用jquery将内联样式与数据属性和浏览器前缀一起使用

1 个答案: