【JavaScript】オブジェクト(ボタンや広告等)の位置を上下に移動させる方法～styleをいじる～

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

さて、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>

CSS

• JavaScript&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);
  });
}

移動制御

//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" ;
  }
}