JavaScript: Позволить пользователю выбрать элемент HTML как Firebug?
Я хочу записать браузер (Chrome/FF) расширение, которое должно выбрать элемент на веб-странице. Я хотел бы, чтобы это вело себя как инспектор элемента Firebug, делает. Вы нажимаете осмотреть стрелку, и можно затем колебаться/выделять элементы. При нажатии на элемент, Вы хотите, элемент осмотрен. Я просто интересуюсь кодом позволять пользователю выбирать элемент - не в фактическом осмотре его или чем-либо подобном.
Поскольку я пишу расширение, могло бы быть хорошо, если Вы могли бы обеспечить non-jQuery/Prototype/etc.. кодируйте, таким образом, я не должен распределять это.
2 ответа
В конце концов я спросил в группе Firebug и получил отличную помощь:
Один простой способ сделать это - использовать контур вместо рамки:
.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.