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

Can't change box-ordinal-group CSS property with Javascript

本文关键字：box-ordinal-group CSS 属性 更改 Javascript      更新时间：2023-09-26

我正在尝试做的是更新特定元素的 box-ordinal-group 属性以更改其在页面中的顺序，但它不知何故不起作用。我的第一个想法是"它是只读的吗？"但在 w3.org 上找不到任何支持这种想法的东西。那么，知道吗？

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

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"));
});
#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
}
<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>

您正在尝试将值设置为整数。 您需要将其转换为字符串，它将起作用：

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"));
  });
});
#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;
}
<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>

尝试使用它， 

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

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

相关文章：