Js window resize changing element width based on another elemnt width

Question

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 class="box">
    <div class="changing__width__element"></div>
  </div>
</body>

CSS does a fantastic job of resizing HTML elements! And it's very simple, and elegant compared to JS. — Lexus de Vinco, Jun 21 '22 at 19:30
I just need js solution, for myself. I was using slick.js slidder and there is was no way to fix the problem with Media — rocan, Jun 22 '22 at 00:08

t.niese · Answer 1 · 2022-06-21T19:37:32.857

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 class="box">
    <div class="changing__width__element"></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 class="box">
    <div class="changing__width__element"></div>
  </div>
</body>

Yea I know it, but thi Is just example of my problem, I need exactly js solution :/ — rocan, Jun 21 '22 at 19:48

score 1 · Accepted Answer · answered Jun 21 '22 at 19:27

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 class="box">
    <div class="changing__width__element"></div>
  </div>
</body>

Js window resize changing element width based on another elemnt width

2 Answers2