Js window resize changing element width based on another elemnt width-CodePudding

So i need change blue square element width when my screen size below 520px evry time i am resising the window. The blue square should get green square width, but green square width style should be in percents.

Nothing works the way i am doing it :(

window.addEventListener('resize', ()=> {
  if (screen.width < 520) {
    const boxElement = document.getElementsByClassName('box')[0].clientWidth,
      changingElement = document.getElementsByClassName('changing__width__element')[0];
    
    changingElement.style.width = `${boxElement}px`;
  }
}, true);

body,html{
  width: 100%;
  height: 100%;
}

.box{
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  background: lime;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.changing__width__element{
  width: 50px;
  height: 50px;
  background: blue;
  position: relative;
}

<body>
  <div >
    <div ></div>
  </div>
</body>

CodePudding user response：

If you don't want to go the CSS route, which is probably the easiest solution, don't use screen.width, use window.innerWidth, you can read more about the difference here: what-is-the-difference-between-window-innerwidth-and-screen-width

window.addEventListener('resize', ()=> {
  const boxElement = document.getElementsByClassName('box')[0].clientWidth,
      changingElement = document.getElementsByClassName('changing__width__element')[0];
  if (window.innerWidth < 520) {
    changingElement.style.width = `${boxElement}px`;
  } else  {
    changingElement.style.width = "50px";
  }
}, true);

body,html{
  width: 100%;
  height: 100%;
}

.box{
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  background: lime;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.changing__width__element{
  width: 50px;
  height: 50px;
  background: blue;
  position: relative;
}

<body>
  <div >
    <div ></div>
  </div>
</body>

CodePudding user response：

There is no need to use JavaScript for it. Just use a media query and change the width to 100% if the size of the window is smaller than 520px.

Changing something based on the screen size is normally not that useful.

body,
html {
  width: 100%;
  height: 100%;
}

.box {
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  background: lime;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.changing__width__element {
  width: 50px;
  height: 50px;
  background: blue;
  position: relative;
}

@media (max-width: 520px) {
  .changing__width__element {
    width: 100%;
  }
}

<body>
  <div >
    <div ></div>
  </div>
</body>

Generally, if you design something it is recommended to use "mobile-first" (or better small window first), and add complexity with larger window sizes:

body,
html {
  width: 100%;
  height: 100%;
}

.box {
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  background: lime;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.changing__width__element {
  width: 100%;
  height: 50px;
  background: blue;
  position: relative;
}

@media (min-width: 520px) {
  .changing__width__element {
    width: 50px;
  }
}

<body>
  <div >
    <div ></div>
  </div>
</body>