ブラウザ画面内でクリックしたエレメントにフォーカスするスニペット

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ブラウザ画面で、色々なツールを作る際に、選択したエレメントを分かりやすくフォーカスするというツールを作って見ました。
 

過去に同じ機能で、色々なサービスの管理画面に対応してきたので、今後も便利に使えると思います。

概要

ブラウザ画面で特定の項目(エレメント)を選択(クリック)した時に、対象のエレメントを強調表示したい。
 

どんな時に使うかと言えば、画面デザインを変更するCMSなどのツールで、任意のエレメントを選択して、見た目を変更する時など、対象のエレメント以外が、半透明になったりすると、際立って分かりやすくなると思います。
 

今回のツールは、周囲を半透明にするのではなく、黒の半透明を周囲に被せて、対象エレメントを分かりやすくするという内容です。

ソースコード

使い方

1. 上記ソースコードを全て選択しておいて、ブラウザのJSコンソールに貼り付けてください。
 

2. ブラウザの任意の項目(エレメント)をクリックした際に、そのエレメント以外が黒くなって、対象項目が目立つように見えます。
 

これだけ!!
 

そして、Yahooで試した時の画面キャプチャはコレ
 

スクリーンショット 2018-02-13 22.02.01
 

ちなみに、もう一度クリックすると、フォーカス表示がもとに戻ります。

解説

周囲の黒い半透明は、上下左右の4箇所にdivを設置し、半透明CSSをセットしています。
 

そして、windowにクリックイベントを仕込んで、クリックされた対象エレメントを取得した時に、そのエレメントの座標とサイズを取得します。
 

あとは、半透明オブジェクトの4つを、サイズと座標に合わせて、組み合わせるように配置(座標とサイズをセット)するだけです。
 

さほど難しいことはやっていませんが、意外とフォーカスしたように見えるでしょ?
 

難しいコーディングをしていないので、かなり古いブラウザでも見えると思いますよ。
 

でも、今回のチェックはChrome(mac)でしか行っていないので、他のブラウザでエラーが出たら、こっそり教えてください。
※あと、z-indexなどが弱い場合は、各自で値を変更してお使いください。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です