выделить элементы HTML

Question

Как можно выделить элементы html с помощью javascript для проверки селекторов html и css, связанных с этим элементом.Выделение может быть просто изменением границ или фона (чтобы не нарушать компоновку) и всплывающей подсказкой, показывающей элемент html и селекторы css, связанные с этим элементом.

Answer 1

Если я вас правильно понимаю, похоже, вам просто нужно использовать что-то вроде Firebug для инструментов Firefox или Developer (F12) для IE. Они есть у каждого браузера.

Они позволяют вам выделять что угодно и играть с любыми css-селекторами. Абсолютный инструментарий для веб-разработчика.

Answer 2

Если вы используете Google Chrome, вы можете включить инструменты разработчика в View / Developer / Developer Tools. При выборе этого меню в нижней части браузера появится рамка с меню (здесь нужно нажать кнопку «Элементы»). Под этим меню вы увидите источник вашего документа. При наведении указателя мыши на определенные теги (т.е.:) элемент будет выделен, и вы сможете увидеть свойства выделенного тега.

Answer 3

Рассматривали ли вы использовать такой инструмент, как Firebug? Это делает отличную работу, показывая источник страницы и выделяя элементы при наведении курсора. Также в последних версиях трех основных браузеров (Chrome, FF, IE) есть встроенный инспектор. В FF 10 щелкните правой кнопкой мыши что-нибудь и выберите «Проверка элемента». В Chrome процесс такой же. В IE 9 нажмите F12, затем Ctrl + B и щелкните нужный элемент.

Answer 4

Вы можете сделать что-то вроде этого:

$('div, a, span, p').hover(function(){
    $(this).css({ "border": "2px solid red" });
    console.log($(this));
},function(){
    $(this).css({ "border": "none" });
});

Я бы использовал Firebug (FF) или Console (Chrome) для проверки элементов.