資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 JavaScript 設定彈性專案的初始長度？
在本教程中，我們將學習如何使用 JavaScript 設定彈性專案的初始長度。
Flexbox 是一種 *一維* 佈局模型，它在介面中的專案之間分配空間，並提供靈活的專案對齊屬性。它建立靈活的專案。使用 JavaScript 中的 `flexBasis` 屬性來設定彈性專案的初始長度。
在本教程中，我們將看到兩種設定彈性專案初始長度的方法：
使用 `style.flexBasis` 屬性
使用 `style.setProperty` 方法
使用 `style.flexBasis` 屬性
`style.flexBasis` 是一個 flexbox 屬性，它確定彈性專案的初始長度。要設定彈性專案的初始長度，我們將長度作為數字提供給 `flexBasis` 屬性的值。在 JavaScript 中，可以使用元素物件的 `style.flexBasis` 屬性設定 `flex-basis`。
語法
document.getElementById('e_id').style.flexBasis = 'auto | number | inherit | initial'
在上述語法中，`document.getElementById()` 方法用於獲取具有 `id` 屬性為“e_id”的元素的元素物件。我們設定該元素物件的 `style.flexBasis` 屬性。
引數
**auto** - 這是預設值。根據其內容設定彈性專案的長度。
**length** - 彈性專案的初始長度（長度單位或百分比）。
**inherit** - `flex-basis` 屬性繼承其父元素的屬性。
**initial** - `flex-basis` 屬性設定為預設值。
示例
在下面的示例中，`style.flexBasis` 屬性用於設定彈性專案的初始長度。“設定初始長度”按鈕與一個點選事件關聯，該事件執行名為“setFlexBasis()”的函式。此函式設定多個彈性專案的初始長度。
<html> <head> <style> .flex { display: flex; } .item { padding: 20px; border: 1px solid rgb(10, 9, 9); background-color: rgb(215, 250, 232); } </style> </head> <body> <h2> Setting the initial length of a flexible item with JavaScript using the <i> style.flexBasis </i> property </h2> <button onclick="setFlexBasis()" style="margin-bottom: 5px;"> Set Initial Length </button> <div id="root" class="flex"> <div id="item1" class="item"> Item 1 </div> <div id="item2" class="item"> Item 2 </div> <div id="item3" class="item"> Item 3 </div> </div> <script> // All flexible items const item1 = document.getElementById('item1'); const item2 = document.getElementById('item2'); const item3 = document.getElementById('item3'); // "Set Initial Length" button click event handler function function setFlexBasis() { item1.style.flexBasis = 'auto'; item1.innerHTML += ' (flexBasis: auto)'; item2.style.flexBasis = '0'; item2.innerHTML += ' (flexBasis: 0)'; item3.style.flexBasis = '500px'; item3.innerHTML += ' (flexBasis: 500px)'; } </script> </body> </html>
使用 `style.setProperty` 方法設定彈性專案的初始長度
`style.setProperty` 方法修改元素的屬性。我們需要使用 `document.getElementById()` 方法訪問元素物件。因此，在此方法的引數中，我們應該在第一個引數中提供“flex-basis”來設定彈性專案的初始長度，並在第二個引數中提供初始長度的值。
語法
document.getElementById('e_id').style.setProperty(property_name, value, priority)
在上述語法中，我們在 `document.getElementById()` 方法返回的元素物件上使用 `style.setProperty` 方法。“e_id”是元素的 `id` 屬性。
引數
**property_name** - 應修改的屬性名稱。
**value** - 屬性的新值。
**priority** - 屬性值的優先順序（可選）。
示例
在下面的示例中，`style.setProperty` 方法用於使用 JavaScript 設定彈性專案的初始長度。輸入欄位獲取使用者對彈性專案初始長度值的輸入。“設定初始長度”按鈕與一個點選事件相關聯，該事件執行“setInitialLength()”函式。此函式根據輸入欄位的值設定彈性專案的初始長度。
<html> <head> <style> .flex { display: flex; background-color: rgb(243, 243, 243); } .item { padding: 20px; border: 1px solid rgb(10, 9, 9); background-color: rgb(215, 250, 232); } </style> </head> <body> <h2> Setting the initial length of a flexible item with JavaScript using the <i> style.setProperty </i> method </h2> <h4> Enter the initial length of the flexible item: </h4> <input type="text" name="initial-length" id="initial-length" value="370px"> <button onclick="setFlexBasis()" style="margin-bottom: 5px;"> Set Initial Length </button> <div id="root" class="flex"> <div id="item" class="item"> Flexible Item </div> </div> <p> Note: You can enter the initial length as auto , inherit, initial or give length value (in px or %) </h4> <script> // "Set Initial Length" button click event handler function function setFlexBasis() { // Flexible item const item = document.getElementById('item'); // user input value for the initial length const initial_length = document.getElementById('initial-length').value item.style.setProperty('flex-basis', initial_length) item.innerHTML = 'Flexible Item (flexBasis: ' + initial_length + ')'; } </script> </body> </html>
在本教程中，我們學習了兩種使用 JavaScript 設定彈性專案初始長度的方法。`style.flexBasis` 屬性用於直接評估彈性專案的初始長度，而 `style.setProperty` 是一種方法，它在其引數中採用初始值並設定彈性專案的初始長度。使用者可以根據自己的需求使用這兩種方法中的任何一種。
瀏覽量：282
