无法使用Javascript更改box-ordinal-group CSS属性

Question

我要做的是更新特定元素的box-ordinal-group属性以更改其在页面中的顺序，但它不会以某种方式工作。我的第一个念头是＃34;它是只读的吗？＆＃34;但是在w3.org上找不到任何支持这种想法的东西。那么，任何想法？

您可以在下方查看和测试我的方法;

＆＃13;

＆＃13;

function get_random_int(min, max){
    return Math.floor(Math.random() * (max - min) + min);
}

var button = $("#btn");

button.on('click', function(){
    var rand_order = get_random_int(1,4);
    var el = $("#blockA");
    console.log(rand_order);
    el.css("-webkit-box-ordinal-group", rand_order);
    el.css("-mox-box-ordinal-group", rand_order);
    el.css("box-ordinal-group", rand_order);
    console.log(el.css("-webkit-box-ordinal-group"));
});

＆＃13;

#blockContainer > div {
    border: 1px dashed #f0f
}

#blockContainer {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
#blockA {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
    order: 2
}
#blockB {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
    order: 1
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blockContainer">
    <div id="blockA">Block A</div>
    <div id="blockB">Block B</div>
    <div id="blockC">Block C</div>
</div>

<button id="btn">test</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您正尝试将值设置为整数。你需要把它投射到字符串，它会工作：

＆＃13;

＆＃13;

function get_random_int(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}
$(function() {
  var button1 = $("#btn");
  button1.on('click', function() {
    var rand_order = get_random_int(1, 4);
    var el = $("#blockA");
    console.log(rand_order);
    el.css("-webkit-box-ordinal-group", rand_order.toString());
    el.css("-mox-box-ordinal-group", rand_order.toString());
    el.css("box-ordinal-group", rand_order.toString());
    console.log(el.css("-webkit-box-ordinal-group"));
  });
});

＆＃13;

#blockContainer > div {
  border: 1px dashed #f0f;
}
#blockContainer {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
#blockA {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  box-ordinal-group: 2;
  order: 2;
}
#blockB {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  box-ordinal-group: 1;
  order: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blockContainer">
  <div id="blockA">Block A</div>
  <div id="blockB">Block B</div>
  <div id="blockC">Block C</div>
</div>
<button id="btn">test</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用它，

$('element').css'cssText', 'box-ordinal-group:<number>');

这将为元素添加内联样式属性并添加指定的css属性。希望这会有所帮助。