Bookmarklet

Bookmarklet : url에 "javascript:/...코드/"와 같은 형식으로 자바스크립트를 사용할 수 있다.

예제1 - 아래 코드를 북마크(즐겨찾기)에 등록

화면을 구성하는 element의 영역을 표시 및 삭제 가능하도록 하는 Bookmarklet

javascript:function doHighlight(){this.style.outline="3px solid red"}function noHighlight(){this.style.outline="1px solid red"}function addXArea(e){for(var t=document.querySelectorAll(e),o=0;o<t.length;o++){var r=t[o],n=r.offsetLeft+r.offsetWidth-20,i=r.offsetTop,l=document.createElement("span");l.classList.add("removeArea"),l.innerHTML='<div style="background-color:silver;color:white;width:20px;height:20px;position:absolute;text-align:center;font-size:13px;z-index:1000;cursor:pointer;left:'+n+"px;top:"+i+'px;" onclick="javascript:this.parentElement.parentElement.remove();allHtmlInit()">X</div>',r.appendChild(l),r.style.outline="1px solid red",r.addEventListener("mouseover",doHighlight),r.addEventListener("mouseleave",noHighlight)}}function removeXArea(){for(var e=document.querySelectorAll(".removeArea"),t=0;t<e.length;t++){var o=e[t];o.remove()}}function allHtmlInit(e){removeXArea();for(var t=e||["div","p","table","nav","li","footer"],o=0;o<t.length;o++)addXArea(t[o])}allHtmlInit();

예제2 - 아래 코드를 북마크(즐겨찾기)에 등록

기능 해제

javascript:function removeXArea(){for(var e=document.querySelectorAll(".removeArea"),o=0;o<e.length;o++){var r=e[o].parentElement;r.removeChild(e[o])}}function removeLine(e){for(var o=document.querySelectorAll(e),r=0;r<o.length;r++){var t=o[r];t.style.outline="",t.removeEventListener("mouseover",doHighlight),t.removeEventListener("mouseleave",noHighlight)}}function removeOutline(e){for(var o=e||["div","p","table","nav","li","footer"],r=0;r<o.length;r++)removeLine(o[r])}removeXArea(),removeOutline();