javascript 要素を拡大させる

javascript 要素を拡大させる

javascriptで、transformのscaleを使用して、要素を拡大させるサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

scale使い方

transformのscaleを使用すると、指定した要素を拡大させることが可能です。

scale使い方

実行結果をみると、指定した要素が拡大されていることが確認できます。

macのsafari(13.1.1)でも同じ結果となります。

また、document.getElementByIdの省略と関数をアロー化して、簡潔に記述することもできます。

サンプルコード

以下は、
「拡大」ボタンをクリックすると「要素」を拡大して、
「縮小」ボタンをクリックすると「要素」を縮小させる
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

移動していることが確認できます。