جافا سكريبت:السماح للمستخدم بتحديد عنصر HTML مثل الحرائق?

Question

أريد أن أكتب متصفح (كروم/FF) التمديد الذي يحتاج إلى تحديد عنصر على صفحة ويب.أود أن تتصرف مثل الحرائق العنصر المفتش لا.انقر فوق فحص السهم ثم يمكنك تحوم/تسليط الضوء على العناصر.عند النقر فوق العنصر الذي تريد عنصر تفتيشها.أنا مهتم فقط في قانون للسماح للمستخدم تحديد عنصر - لا في الواقع تفتيش أو أي شيء مماثل.

لأن أنا أكتب التمديد قد يكون من الجيد إذا كنت يمكن أن توفر غير مسج/النموذج/الخ..رمز لذا لا يجب أن توزيع هذا.

Answer 1

لقد كتبت تطبيقًا لهذا باستخدام jQuery كمكون لمشروع آخر. المصدر والوثائق متوفرة هنا: https://github.com/andrewchilds/jquery.domoutline

Answer 2

لقد طلبت مؤخرًا مثل هذه الميزة لمشروع كنت أعمل عليه ، تبين أنه كان علي استخدام الجانبين لإنشاء صندوق لأنه خلاف ذلك event.target عندما تنقل الماوس سينتهي به المطاف إلى أن يكون المحدد ، وإذا كنت سأستخدمه z-index: -1 سيكون قليلا مريب عندما يكون لديك الكثير من العناصر التي تتداخل ... إلخ.

فيما يلي إصدار قمت بتحويله من مشروعي لمصلحتك ، فهو يتضمن jQuery ولكن من السهل للغاية التحويل إلى فانيلا كما فقط mousemove & css يتم استخدام طرق من jQuery.

تعليمات خطوه بخطوه.

أولا إنشاء 5 htmlelements المطلوبة.

<div id="selector">
    <div id="selector-top"></div>
    <div id="selector-left"></div>
    <div id="selector-right"></div>
    <div id="selector-bottom"></div>
</div>

ثانياً إنشاء أ mousemove حدث على document (أو الحاوية الخاصة بك)

$(document).mousemove(function(event) { ... });

ثم داخل mousemove سنقوم ببعض الفحص الأساسي لمنع اختيار HTML, BODY, selector

var id = event.target.id, tagName = event.target.tagName;

if(id.indexOf('selector') !== -1 || tagName === 'BODY' || tagName === 'HTML') {
   return;
} 

ثم نحتاج إلى إنشاء كائن لتخزين عناصرنا مثل ذلك.

var elements = {
    top: $('#selector-top'),
    left: $('#selector-left'),
    right: $('#selector-right'),
    bottom: $('#selector-bottom')
};

بعد ذلك نقوم بتخزين بعض المتغيرات التي تحتوي على بعض المعلومات حول العنصر المستهدف مثل ذلك.

var $target = event.target;
    targetOffset = $target.getBoundingClientRect(),
    targetHeight = targetOffset.height,
    targetWidth  = targetOffset.width;

ثم كل ما نفعله هو حساب موقع & ارتفاع للجميع 4 جوانب المحدد مثل ذلك.

elements.top.css({
    left:  (targetOffset.left - 4),
    top:   (targetOffset.top - 4),
    width: (targetWidth + 5)
});

elements.bottom.css({
    top:   (targetOffset.top + targetHeight + 1),
    left:  (targetOffset.left  - 3),
    width: (targetWidth + 4)
});

elements.left.css({
    left:   (targetOffset.left  - 5),
    top:    (targetOffset.top  - 4),
    height: (targetHeight + 8)
});

elements.right.css({
    left:   (targetOffset.left + targetWidth + 1),
    top:    (targetOffset.top  - 4),
    height: (targetHeight + 8)
});

جميع ال +aFewPixels هو مجرد تحسين صغير بحيث يكون هناك مثل 2px فجوة بين المحدد والهدف.

ل CSS هذا ما توصلت إليه.

#selector-top, #selector-bottom {
    background: blue;
    height:3px;
    position: fixed;
    transition:all 300ms ease;
}

#selector-left, #selector-right {
    background: blue;
    width:3px;
    position: fixed;
    transition:all 300ms ease;
}

ال transition يمنح المحدد تأثيرًا منزلقًا لطيفًا جدًا.

جرب العرض التوضيحي http://jsfiddle.net/rfc8e/9/

ملاحظة: هذا يعمل أيضًا transform: scale(2); على سبيل المثال. عندما يتم تحجيم عنصر في الحجم.

تعديل: لقد قمت بتحديث هذا للتو ، لقد لاحظت أن elements كان الكائن داخل معالج الأحداث ، لقد قمت بنقله إلى الخارج في العرض التوضيحي ، وهذا تحسن مهم للغاية لأنه الآن ، elements تم إنشاء الكائن فقط بمجرد بدلاً من مئات الآلاف ان لم ملايين مرات داخل mousemove حدث.

Answer 3

إحدى الطرق البسيطة للقيام بذلك هي استخدام مخطط تفصيلي بدلاً من الحدود:

.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.

Answer 4

انتهى بي الأمر إلى السؤال في مجموعة Firebug وحصلت على بعض المساعدة الرائعة:

http://groups.google.com/group/firebug/browse_thread/thread/7d4bd89537cd24e7/2c9483d699efe257؟hl=en#2c9483d6999efe257

Answer 5

تحقق أيضًا من هذا:

http://rockingcode.com/tutorial/element-fom-tree-jquery-plugin-firebug-like-function/

لقد وجدت أنه بصيرة للغاية .. وهناك عرض تجريبي هنا:

http://rockingcode.com/demos/elemtree/

أتمنى أن يساعدك هذا.

Answer 6

HTML Element Picker (Vanilla JS)

اختر وتسليط الضوء على أي عنصر HTML على صفحة مع فقط الفانيليا JS! تم اختباره في Chrome و FF و Opera ، لا يعمل في IE.

كيف تعمل:

ما تحتاجه هو في الواقع بسيط للغاية. يمكنك فقط إنشاء مربع Div فارغ مع خلفية في JS ونقله لتسليط الضوء على أعلى العناصر المحمولة. هذا هو رمز JS:

const hoverBox = document.createElement("div");
console.log("hoverBox: ", hoverBox);
hoverBox.style.position = "absolute";
// change to whatever highlight color you want
hoverBox.style.background = "rgba(153, 235, 255, 0.5)";
// avoid blocking the hovered element and its surroundings
hoverBox.style.zIndex = "0";
document.body.appendChild(hoverBox);
let previousTarget;
document.addEventListener("mousemove", (e) => {
    let target = e.target;
    if (target === hoverBox) {
        // the truely hovered element behind the added hover box
        const hoveredElement = document.elementsFromPoint(e.clientX, e.clientY)[1];
        if (previousTarget === hoveredElement){
            // avoid repeated calculation and rendering
            return;
        } else{
            target = hoveredElement;
        }
    } else{
        previousTarget = target;
    }
    const targetOffset = target.getBoundingClientRect();
    const targetHeight = targetOffset.height;
    const targetWidth = targetOffset.width;
    // add a border around hover box
    const boxBorder = 5;
    hoverBox.style.width = targetWidth + boxBorder * 2 + "px";
    hoverBox.style.height = targetHeight + boxBorder * 2 + "px";
    // need scrollX and scrollY to account for scrolling
    hoverBox.style.top = targetOffset.top + window.scrollY - boxBorder + "px";
    hoverBox.style.left = targetOffset.left + window.scrollX - boxBorder + "px";
});

انظر العرض التوضيحي
أنا أيضا صنعت حزمة NPM بالنسبة إلى منتقي العناصر مع العديد من تكوينات المستخدم مثل لون الخلفية ، وعرض الحدود ، والانتقال ، وما إلى ذلك. صفحة جيثب.

Answer 7

كان هناك سؤال مماثل طرح على Stackoverflow وكان لديه الكثير من الإجابات الجيدة:هل يعرف أي شخص مكتبة أو مكون من مكونات مكون من مفتش DOM مفتش DOM؟

بالنسبة لأولئك الذين يبحثون عن حل سريع وقذر:

http://userscripts.org/scripts/review/3006 هو الأسهل. فقط ضع الكود في الداخل <script></script> العلامات وأنت على ما يرام.

https://github.com/josscrowcroft/simple-javascript-mom-inspector/blob/master/inspector.js هو أفضل قليلاً ولا يزال من السهل للغاية الاندماج فيه.

للحصول على مفتش عنصر أكثر تطوراً ، قد ترغب في التحقق من Selectorgadget كما أشار UDI. رمز اختيار المفتش في http://www.selectorgadget.com/stable/lib/interface.js

Answer 8

فيما يلي مكتبة كتبت في جافا سكريبت الخالصة كبديل.

Theroom JS: https://github.com/hsynlms/theroomjs

// theroom information template for target element
var template="";
template += "<div id=\"theroom-info\">";
template += "  <span id=\"theroom-tag\"><\/span>";
template += "  <span id=\"theroom-id\"><\/span>";
template += "  <span id=\"theroom-class\"><\/span>";
template += "<\/div>";
template += "";
template += "<style>";
template += "  #theroom-info {";
template += "    position: fixed;";
template += "    bottom: 0;";
template += "    width: 100%;";
template += "    left: 0;";
template += "    font-family: \"Courier\";";
template += "    background-color: #ffffff;";
template += "    padding: 10px;";
template += "    color: #333333;";
template += "    text-align: center;";
template += "    box-shadow: 0px 4px 20px rgba(0,0,0,0.3);";
template += "  }";
template += "";
template += "  #theroom-tag {";
template += "    color: #C2185B;";
template += "  }";
template += "";
template += "  #theroom-id {";
template += "    color: #5D4037;";
template += "  }";
template += "";
template += "  #theroom-class {";
template += "    color: #607D8B;";
template += "  }";
template += "<\/style>";

var options = {
  template: template,
  showInfo: true
};

// initialize
theRoom.start(options);

Codepen Demo

Answer 9

ما عليك القيام به هو إنشاء 4 عناصر تسليط الضوء.فإنها تشكل مربع فارغ, و حتى "الماوس الخاص بك" الأحداث حر النار.هذا يشبه هذا تراكب سبيل المثال لقد قدمت.

الفرق هو أن تحتاج فقط العناصر الأربعة (لا تغيير علامات) ، وأن حجم وموضع من 4 خانات مختلفة قليلا (إلى mimick الحدود الحمراء).ثم يمكنك استخدام event.target في معالج الحدث, لأنه يحصل الحقيقي أعلى عنصر بشكل افتراضي.

نهج آخر هو لإخفاء exra العنصر ، على elementFromPoint, وحساب ثم وضعها مرة أخرى.

هم أسرع من الضوء, أستطيع أن أقول لك.حتى أن أينشتاين توافق :)

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);
}

Answer 10

يمكن القيام بتنفيذ أساسي للغاية بسهولة بالغة بدون استخدام jQuery .onmouseover و 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;
  }
});

إلى جانب بعض الحدود ، يمكن أن يكون هذا قابلاً للاستخدام في الاختيار. العرض التوضيحي