【jQuery+CSS】押すたびにdiv要素がズームイン・アウトするボタンを配置する

2018年12月21日HTML, JavaScript, jQuery, スニペット, フロントエンド, 初心者向け

地図のサイトみたいに、拡大ボタンを押すたび画面が拡大する。縮小ボタンを押すたび画面が縮小する。みたいなことをしたかったんですが、意外とそういうのないんですよね。

CSSの値を動的にインクリメントすることは、できそうでできません。

See the Pen Zoom-in & Zoom-out Button by はしのさん@旅ブログ&開発者ブログ (@aotabi_) on CodePen.

JavaScriptで「zoom = 1」という変数を作ってあげて、ボタンが押されるとjQueryでzoomに対して0.1(10%)ずつインクリメントをしてあげてます。

jQuery使わなくてもなんとかなりそうだけど、ちょっと調べて分からなかったのであきらめました。
しかもCSSのzoomなので、要素によっては残念なことになります。要改善だけど、使いどころも謎。