JavaScriptでstyleのleftを変更したい

前提・実現したいこと

JavaScriptでスライダーの実装をしています。
クリックごとにstyle.leftの値を変更したいのですが、反映されません。
お知恵を貸して頂けると嬉しいです。

ソースコード

js
1  const next = document.getElementById('js-next');
2  const slide = document.getElementById('js-slide');
3
4  function slideMove() {
5    slide.style.left -= 690 + 'px';
6    console.log(slide.style);
7  }
8
9  next.addEventListener('click', () => {
10      slideMove();
11  });

html
1<div class="slide">
2  <div class="slide__show">
3    <div id="js-slide" class="slide__inner">
4      <a href="" class="slide__item">スライド</a>
5      <a href="" class="slide__item">スライド</a>
6      <a href="" class="slide__item">スライド</a>
7    </div>
8    <div id="js-prev" class="slide__btn--prev">前へ</div>
9    <div id="js-next" class="slide__btn--next">次へ</div>
10  </div>
11</div>

css
1.slide__show {
2    position: relative;
3    width: 690px;
4    margin: 0 auto;
5    height: 540px;
6  }
7.slide__inner {
8    position: absolute;
9    top: 0;
10    left: -690px;
11    display: flex;
12    flex-wrap: nowrap;
13  }

発生している問題・エラーメッセージ

エラーメッセージは特になし。
consoleでstyleを見るとCSSStyleDeclarationオブジェクトが返ってくるが、leftは空になっている。（他にcssの方で適用したスタイルも全て空）

IDで取得するのとclass名で取得するのでは違うのかな…？と要素の取得方法を変えてみたりしましたが、変わらず…

何か不足している情報などあれば追記させていただきます。
宜しくお願いいたしますm(_ _)m

m.ts10806

2020/05/27 21:05

htmlも提示してください

manape

2020/05/28 20:16

ありがとうございます。追記いたしました！

行動規範の内容に同意します

回答2件

「slide.offsetLeft」を使うとこちらの手元では動作したので書き込んでみます。

JavaScript
1function slideMove() {
2  // slide.style.left -= 690 + "px";
3  slide.style.left = (slide.offsetLeft - 690) + 'px';
4  console.log(slide.style);
5}

style.leftだと「50px」など文字列が取得されますが、
その50pxに690pxを減算しようとしても文字列と文字列の減算になってしまうのではないかと思います。
そのためoffsetLeftなど、「50」といった単位を含めない数値だけが取得できる仕組みを使うべきと考えます。

投稿2020/05/28 07:40

new1ro

総合スコア4528

manape

2020/05/28 21:00

ありがとうございます！自分でもやってみたところ無事動いて感動しました。数値を取得する仕組み、知識が浅かったので他にも調べてみたいと思いますm(_ _)m

行動規範の内容に同意します

ベストアンサー

HTMLElement.styleはstyle属性で設定されたCSS以外は空です。初期値を適当に決めるか、getComputedStyle()を使って計算値を取得しましょう。
また、style.leftは単位をつけた文字列が入っているので、数値に直してから計算しましょう。

js
1function slideMove() {
2  if ( !slide.style.left ) {
3    var style = window.getComputedStyle( slide );
4    slide.style.left = style.left;
5  }
6  slide.style.left = ( parseInt( slide.style.left, 10 ) + 10 )+ 'px';
7  console.log(slide.style.left);
8}
9```**動くサンプル：**[https://jsfiddle.net/8v4wf2gp/](https://jsfiddle.net/8v4wf2gp/)
10
11---
12
13【HTMLElement.style - Web API | MDN】
14[https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/style#Getting_style_information](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/style#Getting_style_information)
15> style プロパティは、要素のインライン style 属性で設定された CSS 宣言のみを表し、><head> セクションのスタイルルールまたは外部スタイルシートなどの、他のスタイルルールからのスタイル宣言を表さないため、一般に要素のスタイルに関する学習には役立ちません。 要素のすべてのCSSプロパティの値を取得するには、代わりに window.getComputedStyle() を使用する必要があります。
16
17【window.getComputedStyle - Web API | MDN】
18[https://developer.mozilla.org/ja/docs/Web/API/Window/getComputedStyle](https://developer.mozilla.org/ja/docs/Web/API/Window/getComputedStyle)
19
20【window.getComputedStyle() で要素のスタイルを取得する - Qiita】
21[https://qiita.com/amamamaou/items/bb79bec002a6ff033810](https://qiita.com/amamamaou/items/bb79bec002a6ff033810)
22
23【parseInt() - JavaScript | MDN】
24[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt)