- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 length of the item relative to the rest with JavaScript?
Use the flex property in JavaScript to set the length of the item relative to the rest. You can try to run the following code to implement flex property with JavaScript −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 300px;
height: 400px;
display: flex;
}
</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;">DIV3</div>
</div>
<button onclick = "display()">Set</button>
<script>
function display() {
var a = document.getElementById("box");
var b = a.getElementsByTagName("DIV");
var j ;
for (j = 0; j < b.length; j++) {
b[j].style.flex = "1";
}
}
</script>
</body>
</html>
Updated on 23-Jun-2020 12:16:12
- Related Questions & Answers
- Set how the item will shrink relative to the rest with JavaScript?
- How to set the order of the flexible item, relative to the rest with JavaScript?
- Set how much the item will grow relative to the rest of JavaScript.
- Set how much a flex item will grow relative to the rest of the flex items with CSS
- How to set the initial length of a flexible item with JavaScript?
- Specify how much a flex item will shrink relative to the rest of the flex items with CSS
- Specify the order of a flexible item relative to the rest of the flex items inside the same container with CSS
- How to set the position of the list-item marker with JavaScript?
- How to set the length of the tab-character with JavaScript?
- Set the initial length of a flex item with CSS
- How to set the list-item marker type with JavaScript?
- How to find the coordinates of the cursor relative to the screen with JavaScript?
- How to set an image as the list-item marker with JavaScript?
- How to set the boldness of the font with JavaScript?
- How to set the size of the background image with JavaScript?
Advertisements