Web ページ上の要素を選択する必要があるブラウザー (Chrome/FF) 拡張機能を作成したいと考えています。Firebug の要素インスペクタのように動作するようにしたいと思います。検査矢印をクリックすると、要素をホバー/ハイライトできます。必要な要素をクリックすると、その要素が検査されます。ユーザーが要素を選択できるようにするコードに興味があるだけで、実際に要素を検査したり、同様のものを調べたりすることには興味がありません。
私は拡張機能を書いているので、jQuery/Prototype/etc 以外のコードを提供していただけると助かります。配布する必要はありません。
別のプロジェクトのコンポーネントとして jQuery を使用して、これの実装を作成しました。ソースとドキュメントはこちらから入手できます: https://github.com/andrewchilds/jQuery.DomOutline
これを行う簡単な方法の 1 つは、ボーダーの代わりにアウトラインを使用することです。
.highlight { outline: 4px solid #07C; }
選択/選択解除する要素にそのクラスを追加および削除するだけです (以下のコードは適切にテストされていません)。
document.body.addEventListener("mouseover", function(e) {
e.stopPropagation();
e.target.addEventListener("mouseout", function (e) {
e.target.className = e.target.className.replace(new RegExp(" highlight\\b", "g"), "");
});
e.target.className += " highlight";
});
境界線の代わりに (Chrome でサポートされている) アウトラインを使用しているため、要素が飛び回ることはありません。EasyReader Extensionで同様のものを使用しています。
最終的に Firebug グループに質問したところ、大きな助けが得られました。
これもチェックしてください：
http://rockingcode.com/tutorial/element-dom-tree-jquery-plugin-firebug-like-functionality/
私はそれがかなり洞察に満ちていることを発見しました..そしてここにデモがあります：
http://rockingcode.com/demos/elemtree/
お役に立てれば。
.onmouseover非常に基本的な実装は、jQueryで andを使用しなくても非常に簡単に実行できますe.target。
var last,
bgc;
document.onmouseover = function(e) {
var elem = e.target;
if (last != elem) {
if (last != null) {
last.classList.remove("hovered");
}
last = elem;
elem.classList.add("hovered");
}
}
子の背景も変更する場合は、以下の CSS を使用します。
.hovered,
.hovered * {
cursor: pointer;
color: black;
background-color: red;
}
エッジの近くの要素のみを選択する場合 (または、エッジの近くの親を選択し、それ以外の場所では要素自体を選択する場合) を使用できます.getBoundingClientRect。
var last;
window.addEventListener("mousemove", function(e) {
if(last) {
last.style.background = ''; // empty is enough to restore previous value
}
var elem = e.target;
if(elem === document.body || elem === document.documentElement) {
return;
}
var bb = elem.getBoundingClientRect();
var xr = e.pageX - bb.left; // x relative to elem
var yr = e.pageY - bb.top; // y relative to elem
var ew = 10; // edge width
if(
xr <= ew
|| xr >= bb.width - ew
|| yr <= ew
|| yr >= bb.height - ew
){
elem.style.background = 'red';
last = elem;
}
});
いくつかの境界線と組み合わせると、選択にかなり使用できます。デモ
Stackoverflow で同様の質問があり、多くの適切な回答がありました。DOM インスペクターの JavaScript ライブラリまたはプラグインを知っている人はいますか?
迅速で汚い解決策を探している人のために：
http://userscripts.org/scripts/review/3006が最も簡単です。コードを<script></script>タグ内に配置するだけで準備完了です。
https://github.com/josscrowcroft/Simple-JavaScript-DOM-Inspector/blob/master/inspector.jsの方がわずかに優れていますが、それでも統合は非常に簡単です。
より洗練された要素インスペクターについては、Udi が指摘する SelectorGadget を確認することをお勧めします。インスペクターの選択コードはhttp://www.selectorgadget.com/stable/lib/interface.jsにあります
ハイライト用に 4 つの要素を作成する必要があります。それらは空の正方形を形成するため、マウスイベントは自由に発生します。これは、私が作成したこのオーバーレイの例に似ています。
違いは、4 つの要素のみが必要であり (サイズ変更マーカーは不要)、4 つのボックスのサイズと位置が少し異なる (赤い境界線を模倣するため) ことです。event.targetデフォルトで実際の最上位の要素を取得するため、イベントハンドラーで使用できます。
もう 1 つの方法は、exra 要素を非表示にして getelementFromPointを計算し、元に戻すことです。
彼らは光よりも速いと言えます。アインシュタインでさえ同意するでしょう:)
1.) elementFromPoint オーバーレイ/ボーダー - [ Demo1 ] FF には v3.0+ が必要
var box = $("<div class='outer' />").css({
display: "none", position: "absolute",
zIndex: 65000, background:"rgba(255, 0, 0, .3)"
}).appendTo("body");
var mouseX, mouseY, target, lastTarget;
// in case you need to support older browsers use a requestAnimationFrame polyfill
// e.g: https://gist.github.com/paulirish/1579671
window.requestAnimationFrame(function frame() {
window.requestAnimationFrame(frame);
if (target && target.className === "outer") {
box.hide();
target = document.elementFromPoint(mouseX, mouseY);
}
box.show();
if (target === lastTarget) return;
lastTarget = target;
var $target = $(target);
var offset = $target.offset();
box.css({
width: $target.outerWidth() - 1,
height: $target.outerHeight() - 1,
left: offset.left,
top: offset.top
});
});
$("body").mousemove(function (e) {
mouseX = e.clientX;
mouseY = e.clientY;
target = e.target;
});
2.) マウスオーバーボーダー - [ Demo2 ]
var box = new Overlay();
$("body").mouseover(function(e){
var el = $(e.target);
var offset = el.offset();
box.render(el.outerWidth(), el.outerHeight(), offset.left, offset.top);
});
/**
* This object encapsulates the elements and actions of the overlay.
*/
function Overlay(width, height, left, top) {
this.width = this.height = this.left = this.top = 0;
// outer parent
var outer = $("<div class='outer' />").appendTo("body");
// red lines (boxes)
var topbox = $("<div />").css("height", 1).appendTo(outer);
var bottombox = $("<div />").css("height", 1).appendTo(outer);
var leftbox = $("<div />").css("width", 1).appendTo(outer);
var rightbox = $("<div />").css("width", 1).appendTo(outer);
// don't count it as a real element
outer.mouseover(function(){
outer.hide();
});
/**
* Public interface
*/
this.resize = function resize(width, height, left, top) {
if (width != null)
this.width = width;
if (height != null)
this.height = height;
if (left != null)
this.left = left;
if (top != null)
this.top = top;
};
this.show = function show() {
outer.show();
};
this.hide = function hide() {
outer.hide();
};
this.render = function render(width, height, left, top) {
this.resize(width, height, left, top);
topbox.css({
top: this.top,
left: this.left,
width: this.width
});
bottombox.css({
top: this.top + this.height - 1,
left: this.left,
width: this.width
});
leftbox.css({
top: this.top,
left: this.left,
height: this.height
});
rightbox.css({
top: this.top,
left: this.left + this.width - 1,
height: this.height
});
this.show();
};
// initial rendering [optional]
// this.render(width, height, left, top);
}