縦のガイド線
https://gyazo.com/a96131108e5fb0383e73a4e5dc36c5a8
CTLRキーを押しながらマウス左ボタンをダブルクリックする操作で
マウスポインタのX座標にページの上から下までガイド線を描きます。
x座標位置に円を描くよう追加しました。
操作のたびにガイド線の位置は更新されます。
ページを移動してもガイド線は表示されたままになっています。
ブラウザでページをリロードするとガイド線は消えます。
インデントの深さの確認やレイアウトの目安に使います。
「CTLRキーを押しながらマウス左ボタンのダブルクリック」する操作が他に割り当てられていると正しく動作しません。
おまけ
ダブルクリックしたときの座標がクリップボードに入っています。
スタイルシートの値の参考などにお使い下さい。
code:script.js
let clickCountLeft = 0;
let clickCountRight = 0;
document.addEventListener('mousedown', function(e) {
if (e.ctrlKey) {
if (e.button === 0) {
clickCountLeft++;
if (clickCountLeft === 2) {
vlineset(e.clientX,e.clientY); // 縦線
clickCountLeft = 0;
}
}
} else {
clickCountLeft = 0;
}
});
// 縦線を保持する変数を定義します
var verticalLine = null;
// 円を保持する変数を定義します
var circle = null;
// マウスがダブルクリックされたときに実行する関数を定義します
function vlineset(x,y) {
// 前に描かれた線があれば、それを削除します
if (verticalLine) {
document.body.removeChild(verticalLine);
}
// 前に描かれた円があれば、それを削除します
if (circle) {
document.body.removeChild(circle);
}
// 新しいdiv要素(縦線)を作成します
verticalLine = document.createElement('div');
verticalLine.style.position = 'fixed'; // 絶対位置を指定します
verticalLine.style.height = window.innerHeight + 'px'; // 線の高さをウィンドウの高さに設定します
// z-indexを設定 画像などの後ろに隠れないように!
verticalLine.style.zIndex = '1000';
verticalLine.style.width = '3px'; // 線の幅を指定します
verticalLine.style.backgroundColor = '#FF0000'; // 線の色を赤に設定します
verticalLine.style.opacity = '0.3'; // 線の不透明度を設定します
// 縦線の位置をマウスのX座標に設定します
verticalLine.style.left = x-1 + 'px';
verticalLine.style.top = '0px';
// 縦線をbodyに追加します
document.body.appendChild(verticalLine);
// 円要素を作成します
circle = document.createElement('div');
circle.style.position = 'fixed'; // 絶対位置を指定します
circle.style.width = '10px'; // 円の直径を指定します
circle.style.height = '10px'; // 円の直径を指定します
circle.style.borderRadius = '50%'; // 円形にするために、ボーダーの半径を50%に設定します
circle.style.backgroundColor = '#FF0000'; // 円の色を赤に設定します
circle.style.opacity = '0.4'; // 円の不透明度を設定します
circle.style.zIndex = '1000'; // z-indexを設定します
// 円の位置をマウスの座標に設定します
circle.style.left = x-5 + 'px'; // 円の中心がマウスの座標になるように、左からの位置をマウスのX座標から5px減らします
circle.style.top = y-5 + 'px'; // 円の中心がマウスの座標になるように、上からの位置をマウスのY座標から5px減らします
// 円をbodyに追加します
document.body.appendChild(circle);
addxyvalueonclip(x,y); // おまけ
}
function addxyvalueonclip(x,y) {
var text = 'left: ' + x + 'px; top: ' + y + 'px;';
navigator.clipboard.writeText(text).then(function() {
// console.log('Copying to clipboard was successful!');
}, function(err) {
// console.error('Could not copy text: ', err);
});
}