¿Es posible devolver el selector css "resaltado" (como Firebug) o dom id con jquery?

Question

Al hacer clic en la flecha "Hacer clic en un elemento de la página para inspeccionar" con FireBug, pone un borde azul alrededor del elemento de destino y también devuelve el ID de DOM.

Estoy construyendo una aplicación y esa característica sería increíble de agregar. Sea capaz de pasar el cursor sobre los elementos y resaltar el objetivo, al hacer clic en el selector de ID DOM o CSS a la aplicación.

¿Hay un complemento jquery que hace esta magia? ¿Alguna otra manera inteligente?

Gracias !,

Jonathan

Answer 1

utilicé lo tster proporciona, y para obtener el cssPath, escribí la siguiente función $.fn.cssPath que me devuelve el selector CSS para hacer referencia a este elemento en el futuro. Hasta ahora está funcionando genial.

  $.fn.cssPath = function() { 
      var currentObject = $(this).get(0);   
      cssResult = ""; 
      while (currentObject.parentNode) { 
       if(currentObject.id) { 
       cssResult = currentObject.nodeName + '#' + currentObject.id + " " + cssResult; 
       break; 
       } else if(currentObject.className) { 
       cssResult = currentObject.nodeName + '.' + currentObject.className + " " + cssResult;    
       } else { 
       cssResult = currentObject.nodeName + " " + cssResult;    
       } 
       currentObject = currentObject.parentNode; 
      } 
      return cssResult.toLowerCase(); 
      } 

    $("*").mouseenter(function() { 
     $(".highlight").removeClass("highlight"); 
     $(this).addClass("highlight");   
    }); 

    $("*").bind('click',function(event){ 
    var value = $(this).cssPath(); 
    $('#web_page_filter',top.document).val(value); 
    return false; 
    }); 

Answer 2

$("*").mouseenter(function() { 
    $(".highlighted").addClass("unhighlighted").removeClass("highlighted"); 
    $(this).addClass("highlighted"); 
}); 

$("*").mouseleave(function() { 
    $(this).removeClass("highlighted").parents(".unhighlighted").first().addClass("highlighted"); 
}); 

JSFiddle

Answer 3

Hay algunos "favlets" (scripts que se agregan a los favoritos) que hacen la cosa similar. Aquí hay uno: http://slayeroffice.com/?c=/content/tools/modi.html, ya que favlet es simplemente un javascript antiguo y simple, puedes usarlo en tu página. Haga clic en el enlace "Mouseover DOM Inspector" para ver el efecto.

Answer 4

Fácil de hacer. Lo que le interesa es la target:

$(document).ready(function() { 
    $(document).click(function(e) { 
     alert(e.target); 
     $(".highlight").removeClass("highlight"); 
     $(e.target).addClass("highlight"); 
     var id = e.target.id; // or $(e.target).attr('id'); 
    }); 
});​ 

Inténtelo aquí: http://jsfiddle.net/3Yw4x/1/