数据结构
网络
关系数据库管理系统 (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
