Q&A
実現したいこと
特定の要素の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 + ')'; });
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/23 17:02
2023/03/23 21:49