如何使用 JavaScript 设置弹性项目的方向?
在本教程中，我们将学习如何使用 JavaScript 设置弹性项目的方向。
可以使用 CSS 的 flex-direction 属性设置弹性项目的方向。它定义了弹性项目将如何放置在弹性容器中。其默认值设置为"row"，但它可以具有其他值，例如"column"、"row-reverse"等。
要使用 JavaScript 设置灵活项目的方向，我们有多种方法，在本教程中，我们将讨论其中两种 -
使用 style.flexDirection 属性
使用 style.setProperty 方法
使用 style.flexDirection 属性
可以使用元素的 style.flexDirection 属性设置灵活项目的方向。元素对象包含此属性，因此首先使用 document.getElementById() 方法访问元素对象，然后使用 style.flexDirection 属性通过 JavaScript 设置灵活项目的方向。
语法
const element = document.getElementById('id')
element.style.flexDirection = row | column | row-reverse | column-reverse | inherit | initial
在上述语法中，我们使用 document.getElementById() 方法访问 id 为'id'的 HTML 元素的元素对象，并设置其 style.flexDirection 属性。
参数
row − 弹性项目水平放置为一行(默认值)。
column − 弹性项目垂直放置为一列。
row-reverse − 弹性项目水平放置为一行，顺序相反。
column-reverse − 弹性项目垂直放置为一列，顺序相反。
inherit − flex-direction 属性由其父元素继承属性。
initial − flex-direction 属性设置为 default。
示例 1
在下面的示例中，我们使用 flex-direction 属性在 JavaScript 中设置灵活项目的方向。您可以尝试运行以下代码来了解如何实现 flexDirection 属性来设置灵活项目的方向 −
<!DOCTYPE html> <html> <head> <style> #box { border: 1px solid #000000; width: 450px; height: 150px; display: flex; flex-direction: column; } #box div { flex-grow: 0; flex-shrink: 1; flex-basis: 20px; } </style> </head> <body> <div id="box"> <div style="background-color:orange;">DIV1</div> <div style="background-color:blue;">DIV2</div> <div style="background-color:yellow;" id="myID">DIV3</div> </div> <p>Using flexDirection property</p> <button onclick="display()">Set</button> <script> function display() { document.getElementById("box").style.flexDirection = "row-reverse"; } </script> </body> </html>
示例 2
在下面的示例中，我们使用 style.flexDirection 属性通过 JavaScript 设置灵活项目的方向。我们使用按钮"设置 Flex 方向"点击事件来执行"setFlexDirection()"函数，该函数设置多个元素的 flex-direction 属性。
<html> <head> <style> .flexible-item { display: flex; border: 1px solid black; padding: 10px; margin: 5px 0px; background-color: #f0f0f0; } .flex-item { padding: 10px; border: 1px solid black; background-color: aliceblue; margin: 5px; } </style> </head> <body> <h2> Set the direction of the flexible items using <i> style.flexDirection property </i> with JavaScript </h2> <button onclick="setFlexDirection()"> Set Flex Direction </button> <br /><br /> <div> <div> <b> style.flexDirection = 'row' </b> </div> <div id="element1" class="flexible-item"> <div class="flex-item"> 1 </div> <div class="flex-item"> 2 </div> <div class="flex-item"> 3 </div> </div> <div><b> style.flexDirection = 'column' </b></div> <div id="element2" class="flexible-item"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <div><b> style.flexDirection = 'row-reverse' </b></div> <div id="element3" class="flexible-item"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <div><b> style.flexDirection = 'column-reverse' </b></div> <div id="element4" class="flexible-item"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> </div> <script> // 'Set Flex Direction' button click event handler function function setFlexDirection() { const element1 = document.getElementById('element1') const element2 = document.getElementById('element2') const element3 = document.getElementById('element3') const element4 = document.getElementById('element4') // Set the flex-direction property using the style.flexDirection property element1.style.flexDirection = 'row' element2.style.flexDirection = 'column' element3.style.flexDirection = 'row-reverse' element4.style.flexDirection = 'column-reverse' } </script> </body> </html>
使用 style.setProperty 方法
可以使用 style.setProperty 方法在 JavaScript 中设置元素的任何新属性或现有属性。要使用 style.setProperty 方法设置弹性项目的方向，我们需要使用 document.getElementById() 方法获取元素对象，然后我们就可以轻松设置 flex-direction 属性。在 style.setProperty 方法的属性名称参数中，它应该是'flex-direction'，并且值和优先级将根据用户而定。
语法
const element = document.getElementById('id')
element.style.setProperty(property_name, value, priority)
在上述语法中，我们使用 document.getElementById() 方法访问 id 为'id'的 HTML 元素的元素对象，然后使用 style.setProperty 方法。
参数
property_name − 要设置的属性的名称。
value − 属性的新值属性。
priority − 属性值的优先级(可选)。
示例
在下面的示例中，我们使用 style.setProperty 方法通过 JavaScript 设置灵活项目的方向。我们使用输入字段来获取用户对灵活项目方向的输入。按钮"设置 Flex 方向"与执行"setFlexDirection()"函数的点击事件相关联，该函数设置灵活项目的方向。
<html> <head> <style> .flexible-item { display: flex; border: 1px solid black; padding: 10px; margin: 5px 0px; background-color: #f0f0f0; } .flex-item { padding: 10px; border: 1px solid black; background-color: aliceblue; margin: 5px; } </style> </head> <body> <h2> Set the direction of the flexible items using <i> style.setProperty method </i> with JavaScript </h2> <h4>Enter the direction (row, column, row-reverse, column-reverse)of the flexible items:</h4> <input id="flex-direction" type="text" name="flex-direction" value="column"> <button onclick="setFlexDirection()"> Set Flex Direction </button> <br /><br /> <div id="root" class="flexible-item"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> <script> // 'Set Flex Direction' button click event handler function function setFlexDirection() { const root = document.getElementById('root') // input field's value const flex_direction = document.getElementById('flex-direction').value // Set the flex-direction property using the style.setProperty method root.style.setProperty('flex-direction', flex_direction) } </script> </body> </html>
在本教程中，我们讨论了使用 JavaScript 设置弹性项目方向的两种方法。第一种方法是使用 style.flexDirection 属性，另一种方法是使用 style.setProperty 方法。
