如何使用 JavaScript 设置灵活项目的初始长度?
在本教程中，我们将学习如何使用 JavaScript 设置灵活项目的初始长度。
Flexbox 是一种一维布局模型，可在界面中的项目之间分配空间，并提供灵活的项目对齐属性。它创建灵活项目。使用 JavaScript 中的 flexBasis 属性设置灵活项目的初始长度。
在本教程中，我们将看到两种设置灵活项目初始长度的方法 -
使用属性 style.flexBasis
使用方法 style.setProperty
使用 style.flexBasis 属性
样式 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 是一种在其参数中获取初始值并设置灵活项初始长度的方法。用户可以根据自己的需求使用这两种方法中的任何一种。
