【javascript】取得した要素のwidthを数値に変換する方法

Question

実現したいこと

特定の要素のwidthをelement.clientWidthで取得して、取得したwidthの値を数値として使いたいです。

イメージとしましては以下のコードの○○の部分にelement.clientWidthで取得した値を入れて自由に操作する感じです。（要素のwidthが100pxの場合、100px分左右に移動できるようにしたい）

element.style.transform = 'translateX(○○)';

調べたこと

色々調べた結果parseIntを使えばいいという記事を発見したのですが、使い方がイマイチわからず、そもそも自分の意図する動作がparseIntで実現できるのかどうかも分からなかったので質問させていただきました。ご回答いただけますと幸いです。

追加したコードです

<div id="main_visual">
      <div id="main_visual_slider">
        <img src="https://cdn.pixabay.com/photo/2022/08/12/15/40/rainbow-7381976_960_720.jpg">
        <img src="https://cdn.pixabay.com/photo/2014/09/19/12/30/pencils-452238_960_720.jpg">
        <img src="https://cdn.pixabay.com/photo/2015/08/28/11/37/painting-911804_960_720.jpg" >
        <img src="https://cdn.pixabay.com/photo/2017/07/03/20/17/colorful-2468874_960_720.jpg">
        <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg">
      </div>
      <span id="prev_btn"></span>
      <span id="next_btn"></span>
    </div>

* {
  box-sizing: border-box;
  outline: 1px solid magenta;
}

img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-width: 100%;
  vertical-align: bottom;
}

#main_visual {
  position: relative;
  width: 900px;
  height: 500px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

#main_visual_slider {
  position: relative;
  display: flex;
  width: 900px;
  max-width: 100%;
}

#prev_btn,
#next_btn {
  position: absolute;
  top: calc(50% - 10px);
  display: block;
  width: 20px;
  height: 20px;
  border-top: 3.5px solid #ffffff;
  border-left: 3.5px solid #ffffff;
  transition: all 0.3s ease 0s;
  opacity: 0;
  visibility: hidden;
}

#prev_btn.display,
#next_btn.display {
  opacity: 1;
  visibility: visible;
}

#prev_btn {
  left: 55px;
  transform: rotate(315deg);
}

#next_btn {
  right: 55px;
  transform: rotate(135deg);
}

const mainVisual = document.getElementById('main_visual');
const mainVisualPrevBtn = document.getElementById('prev_btn');
const mainVisualNextBtn = document.getElementById('next_btn');

mainVisual.addEventListener('mouseover', () => {
  mainVisualPrevBtn.classList.add('display');
  mainVisualNextBtn.classList.add('display');
});

mainVisual.addEventListener('mouseout', () => {
  mainVisualPrevBtn.classList.remove('display');
  mainVisualNextBtn.classList.remove('display');
});





const prevBtn = document.getElementById('prev_btn');
const nextBtn = document.getElementById('next_btn');
const main_visual_slider = document.getElementById('main_visual_slider');
const main_visual_slider_w = main_visual_slider.clientWidth;

nextBtn.addEventListener('click', () => {
  main_visual_slider.style.transform = 'translateX(' + main_visual_slider_w + ')';
});

Answer 1

element.style.transform = `translateX(${element.clientWidth}px)`;

や

element.style.transform = 'translateX(' + element.clientWidth + 'px)';

でよいでしょう。

parseInt() は文字列を数値に変換するものなので、無関係です。

Comments

[suzu1234]

ご回答ありがとうございます。

element.style.transform = 'translateX(' + element.clientWidth + ')';

こちらのコードを使ってみたのですが、うまく動いてくれませんでした。右側にtranslateXを使いたい場合は+の記述が必要になると思うのですが、どのように記述すればいいでしょうか？

[int32_t]

数値の後に px を付けないといけないかもですね。')' を 'px)' にすればよいかもしれません。

> 右側にtranslateXを使いたい場合は+の記述が必要になると思う

何を仰っているのか不明です。