質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.05%

JavaScriptでstyleのleftを変更したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 370

manape

score 6

前提・実現したいこと

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

ソースコード

  const next = document.getElementById('js-next');
  const slide = document.getElementById('js-slide');

  function slideMove() {
    slide.style.left -= 690 + 'px';
    console.log(slide.style);
  }

  next.addEventListener('click', () => {
      slideMove();
  });
<div class="slide">
  <div class="slide__show">
    <div id="js-slide" class="slide__inner">
      <a href="" class="slide__item">スライド</a>
      <a href="" class="slide__item">スライド</a>
      <a href="" class="slide__item">スライド</a>
    </div>
    <div id="js-prev" class="slide__btn--prev">前へ</div>
    <div id="js-next" class="slide__btn--next">次へ</div>
  </div>
</div>
.slide__show {
    position: relative;
    width: 690px;
    margin: 0 auto;
    height: 540px;
  }
.slide__inner {
    position: absolute;
    top: 0;
    left: -690px;
    display: flex;
    flex-wrap: nowrap;
  }

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2020/05/28 06:05

    htmlも提示してください

    キャンセル

  • manape

    2020/05/29 05:16

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

    キャンセル

回答 2

checkベストアンサー

+2

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

function slideMove() {
  if ( !slide.style.left ) {
    var style = window.getComputedStyle( slide );
    slide.style.left = style.left;
  }
  slide.style.left = ( parseInt( slide.style.left, 10 ) + 10 )+ 'px';
  console.log(slide.style.left);
}

動くサンプル:https://jsfiddle.net/8v4wf2gp/


【HTMLElement.style - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/style#Getting_style_information

style プロパティは、要素のインライン style 属性で設定された CSS 宣言のみを表し、><head> セクションのスタイルルールまたは外部スタイルシートなどの、他のスタイルルールからのスタイル宣言を表さないため、一般に要素のスタイルに関する学習には役立ちません。 要素のすべてのCSSプロパティの値を取得するには、代わりに window.getComputedStyle() を使用する必要があります。

【window.getComputedStyle - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/getComputedStyle

【window.getComputedStyle() で要素のスタイルを取得する - Qiita】
https://qiita.com/amamamaou/items/bb79bec002a6ff033810

【parseInt() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/29 06:15

    無事動きました、ありがとうございます!
    サンプルと参考URLもつけていただき助かりましたm(_ _)m

    キャンセル

+2

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

function slideMove() {
  // slide.style.left -= 690 + "px";
  slide.style.left = (slide.offsetLeft - 690) + 'px';
  console.log(slide.style);
}

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/29 06:00

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る