How to set the length of the item relative to the rest with JavaScript?

JavascriptObject Oriented ProgrammingFront End Technology

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>
raja
Published on 27-Feb-2018 16:31:11
Advertisements