Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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>
Using the style.setProperty Method
The style.setProperty method modifies an element's property. We need to access the element object using the document.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 "setFlexBasis()" 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 %) </p>
<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>
Comparison of Methods
| Method | Syntax | Use Case |
|---|---|---|
style.flexBasis |
Direct property assignment | Simple, direct setting of flex-basis |
style.setProperty() |
Method with parameters | Dynamic property setting with optional priority |
Conclusion
Both style.flexBasis and style.setProperty() effectively set the initial length of flexible items. Choose the direct property approach for simplicity or the setProperty method when you need dynamic control over CSS properties.
459 Views
