Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the initial length of a flexible item with JavaScript?
In this tutorial, we will learn how to set the initial length of a flexible item with JavaScript.
Flexbox is a one-dimensional layout model that distributes space among items in an interface and provides flexible item alignment properties. It creates flexible items. Use the flexBasis property in JavaScript to set the initial length of a flexible item.
In this tutorial, we will see two approaches to setting the initial length of a flexible item −
Using the property style.flexBasis
Using the method style.setProperty
Using the style.flexBasis Property
The style flexBasis is a flexbox property that determines the initial length of a flexible item. To set the initial length of a flexible item, we provide a length as a number as the value of the flexBasis property. In JavaScript, the flex-basis can be set up using the style.flexBasis property of an element object.
Syntax
document.getElementById('e_id').style.flexBasis = 'auto | number | inherit | initial'
In the above syntax, the document.getElementById() method is used to get the element object of an element that has the id attribute as ‘e_id’. We set up the style.flexBasis property of that element object.
Parameters
auto − It is the default value. Set the length of the flexible item according to its content.
length − The flexible item’s initial length in length units or percentage.
inherit − The flex-basis property is inherited by its parent element’s property.
initial − The flex-basis property sets to default.
Example
In the below example, the style.flexBasis property is used to set the initial length of a flexible item. A button “Set Initial Length” is associated with a click event that executes a function called the “setFlexBasis()” function. This function sets the initial length of multiple flexible items.
<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>
Set the initial length of a flexible item using the style.setProperty method
The style.setProperty method modifies an element’s property. We need to access the element object using the document to use this method.getElementById() method. Therefore, in the arguments of this method, we should provide a 'flex-basis' in the first argument to set the initial length of the flexible item and the value of the initial length in the second argument.
Syntax
document.getElementById('e_id').style.setProperty(property_name, value, priority)
In the above syntax, we use the style.setProperty method on the element object returned by the document.getElementById() method. The ‘e_id’ is the id attribute of the element
Parameters
property_name − The property name that should be modified.
value − The new value of the property.
priority − The property value priority (optional).
Example
In the below example, the style.setProperty method is used to set the initial length of a flexible item with JavaScript. An input field takes the user’s input for the initial length value of flexible items. A button “Set Initial Length” is associated with a click event that executes the “setInitialLength()” function. This function sets the initial length of a flexible item as per the input field’s value.
<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>
In this tutorial, we learned two approaches to setting the initial length of a flexible item with JavaScript. The style.flexBasis property is used to directly assess the initial length of a flexible item, whereas the style.setProperty is a method that takes the initial value in its argument and sets the initial length of a flexible item. Users can use any of these two approaches based on their requirements.
182 Views
To Continue Learning Please Login