HTML DOM Style order 屬性返回並修改柔性項目相對於 HTML 文檔中同一容器內其餘柔性項目的順序。
用法
以下是語法 -
1.返回單
object.order
2.修改訂單
object.order = “value”
在這裏,價值可以是 -
值 | 解釋 |
---|---|
initial | 它將此屬性值設置為其默認值。 |
inherit | 它從其父元素繼承此屬性值。 |
number | 它表示指定靈活項目順序的數字。 |
讓我們看一個 HTML DOM 樣式順序屬性的例子 -
示例
<!DOCTYPE html>
<html>
<style>
body {
color:#000;
height:100vh;
background-color:#8BC6EC;
background-image:linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
.btn {
background:#db133a;
border:none;
height:2rem;
border-radius:2px;
width:40%;
display:block;
color:#fff;
outline:none;
cursor:pointer;
margin:1rem auto;
}
.container {
border:3px solid #fff;
margin:1rem auto;
display:flex;
padding:2rem;
}
.box {
width:100px;
height:100px;
}
</style>
<body>
<h1 style="text-align:center">DOM Style order Property Demo</h1>
<div class="container">
<div class="box" id="b1" style="background-color:#7F055F;"></div>
<div class="box" id="b2" style="background-color:#3A015C;"></div>
<div class="box" id="b3" style="background-color:#177E89;"></div>
</div>
<button onclick="set()" class="btn">Change order</button>
<script>
function set() {
document.querySelector('#b1').style.order = "3";
document.querySelector('#b2').style.order = "2";
document.querySelector('#b3').style.order = "1";
}
</script>
</body>
</html>
輸出
點擊 ”Change order” 按鈕來更改內部靈活項目的順序white 邊境集裝箱。
相關用法
- HTML DOM Style overflowY屬性用法及代碼示例
- HTML DOM Style outlineOffset屬性用法及代碼示例
- HTML DOM Style outlineColor屬性用法及代碼示例
- HTML DOM Style opacity屬性用法及代碼示例
- HTML DOM Style outline屬性用法及代碼示例
- HTML DOM Style outlineStyle屬性用法及代碼示例
- HTML DOM Style outlineWidth屬性用法及代碼示例
- HTML DOM Style overflowX屬性用法及代碼示例
- HTML DOM Style objectFit屬性用法及代碼示例
- HTML DOM Style overflow屬性用法及代碼示例
- HTML DOM Style objectPosition屬性用法及代碼示例
- HTML DOM Style pageBreakAfter屬性用法及代碼示例
- HTML DOM Style transition屬性用法及代碼示例
- HTML DOM Style maxWidth屬性用法及代碼示例
- HTML DOM Style textAlignLast屬性用法及代碼示例
- HTML DOM Style borderBottomWidth屬性用法及代碼示例
- HTML DOM Style width屬性用法及代碼示例
- HTML DOM Style margin屬性用法及代碼示例
- HTML DOM Style textDecoration屬性用法及代碼示例
- HTML DOM Style borderCollapse屬性用法及代碼示例
注:本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Style order Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。