Style order 属性 详解
css3基础 2023-07-30 02:45:10小码哥的IT人生shichen
Style order 属性
实例
设置弹性项目的顺序：
document.getElementById("myRedDIV").style.order = "4";
document.getElementById("myBlueDIV").style.order = "3";
document.getElementById("myGreenDIV").style.order = "1";
document.getElementById("myPinkDIV").style.order = "2";
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 400px;
height: 150px;
border: 1px solid #000000;
display: flex;
}
#main div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;" id="myRedDIV"></div>
<div style="background-color:lightblue;" id="myBlueDIV"></div>
<div style="background-color:lightgreen;" id="myGreenDIV"></div>
<div style="background-color:pink;" id="myPinkDIV"></div>
</div>
<p>点击“试一试”按钮可改变四个 DIV 的顺序：</p>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("myRedDIV").style.order = "4";
document.getElementById("myBlueDIV").style.order = "3";
document.getElementById("myGreenDIV").style.order = "1";
document.getElementById("myPinkDIV").style.order = "2";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
返回 order 属性：
object.style.order
设置 order 属性：
object.style.order = "number|initial|inherit"
属性值
| 值 | 描述 |
|---|---|
| number | 默认值 0。规定弹性项的顺序。 |
| initial | 将此属性设置为其默认值。请参阅 initial。 |
| inherit | 从其父元素继承此属性。请参阅 inherit。 |
技术细节
| 默认值： | 0 |
|---|---|
| 返回值： | 字符串，表示元素的 order 属性。 |
| CSS 版本： | CSS3 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 12.0 | 支持 | 支持 | 支持 |
相关页面
HTML DOM STYLE 参考手册：alignContent 属性
HTML DOM STYLE 参考手册：alignItems 属性
HTML DOM STYLE 参考手册：alignSelf 属性
HTML DOM STYLE 参考手册：flex 属性
HTML DOM STYLE 参考手册：flexBasis 属性
HTML DOM STYLE 参考手册：flexDirection 属性
HTML DOM STYLE 参考手册：flexFlow 属性
HTML DOM STYLE 参考手册：flexGrow 属性
HTML DOM STYLE 参考手册：flexShrink 属性
HTML DOM STYLE 参考手册：flexWrap 属性
