【JavaScript】オブジェクト(ボタンや広告等)の位置を上下に移動させる方法~styleをいじる~
今話題の放置ゲー「キノコ伝説」無料DLはこちら(PR)

代表からの切実なお願い
トラッキング「許可」お願いいたしますm(_ _)m

中山テック 代表の中山です。

さて、Excel系とJavaScriptのブログの「索引」ボタンの横に上下矢印ボタンを設置しました。

※パソコンとタブレットで見られます

▲ボタンをクリックするとボタンが上に、▼ボタンをクリックするとボタンが下に移動します。

というのも、「索引」ボタンの位置と文字・画像が被って見辛い!と思っておりました。

そこで!索引ボタンの位置を移動出来ればと思い場所移動できるように改修しました。

どのようなプログラムなのか、ご説明したいと思います。





動きと概要について、動画をアップしました。

※詳細のプログラムは当ブログにて説明とさせて頂ければ

面白い、参考になったと思って頂けたらチャンネル登録・高評価お願いいたします!

プログラム

HTML

<div id="sakuin-select">
  <table style="border: 0px none;">
    <tr>
      <td style="border: 0px none;"><button id="upButton" class="button-select">▲</button></td>
      <td style="border: 0px none;" rowspan="2"><button id="sakuinButton" class="koukoku-select">JavaScript&amp;CSS索引</button> 
</td>
    </tr>
    <tr>
      <td style="border: 0px none;"><button id="downButton" class="button-select">▼</button></td>
    </tr>
  </table>  
</div>

動きは動画か、当ブログ「JavaScript&CSS索引」横の▲▼ボタンを押して試してください。

まず、固定表示エリア「sakuin-select」を配置します。

※このエリアの制御はこちらのブログに記載しているので割愛

以下、テーブル定義で左側に▲▼を上下に、そしてrowspanで結合した右側に索引ボタンを配置します。

ボタン配置イメージ

CSS

こちらのブログに記載しているので割愛(ダイアログのブログ)。



  • システム開発関連記事

JavaScript

onload領域の定義

if(document.getElementById("sakuinButton") != null) {
  buttonId = document.getElementById("sakuinButton");
}

~【中略】~

if(document.getElementById("upButton") != null) {
  document.getElementById("upButton").addEventListener("click", () => {
    dialogButtonIchiHenkou(1);
  });
}
if(document.getElementById("downButton") != null) {
  document.getElementById("downButton").addEventListener("click", () => {
    dialogButtonIchiHenkou(0);
  });
}

画面表示が終わったらonload領域でイベント待機させます。

今回はボタンなので「click」を設定します。

▲▼ボタン2つありますので、2つ分定義するのをお忘れなく。

他のブログで「upButton」「downButton」がない場合があるのでif文でない場合はイベント待機させない処理も入れましょう。

そして「dialogButtonIchiHenkou」関数を起動します。

移動制御

//20231219_ダイアログボタン位置変更
// 1:上に
// 0:下に
function dialogButtonIchiHenkou(flg) {
  let element = document.getElementById("sakuin-select"); ⇒①
  let style = window.getComputedStyle(element); ⇒②
  let value = style.getPropertyValue('bottom'); ⇒③
  let pxNum = value.replace("px","");
  if(flg == 1) {
    element.style.bottom = (Number(pxNum) + updownButtonIchi) + "px" ; ⇒④
  }else{
    element.style.bottom = (Number(pxNum) - updownButtonIchi) + "px" ;
  }
}

①では固定領域のオブジェクトを取得します。

※このエリアごと移動させたいがため

続いて②でstyleを取得します。

いわゆるCSS定義されている要素を取得する処理になります。

③ではCSS定義されている中の「bottom」を取得、最下から現在地までのpx数をゲットします。

最後の④はpxを数値化し、50px分UPまたはDOWNさせるようにします。

flgの1はUP、0はdownとしており、関数呼び元でセットしてます。

※決めの問題なのでflg設定値は何でも良いです



まとめ

今回も短いブログでしたがいかがでしたでしょうか。

伝えたかったことは「スタイルの設定値を取得・再セットで無限に動きを制御できる」ということです。

当ブログではボタンの位置を50px動かすという単純なプログラムをご紹介しましたが、応用はたくさん効きます。

色々試して頂いて、色とりどりのWEBサイト制作してみてください!

最後までご覧頂き、ありがとうございました。

※中山テックに掲載しているゲーム画像の著作権、商標権、その他知的財産権は、当該コンテンツの提供元に帰属します


Anker PowerCore 10000 (10000mAh 大容量 モバイルバッテリー)【PSE技術基準適合/PowerIQ搭載】 iPhone&Android対応 (ブラック)

新品価格
¥2,990から
(2024/1/20 01:31時点)

おすすめの記事