linkNoBorder() { 링크/이미지 클릭시 점선 안생기는 함수 }


Script Code:


<script type=”text/javascript”>


function linkNoBorder() {
 var myAnchors = document.getElementsByTagName(‘a’);
 for(i=0; i<myAnchors.length; i++) {
  myAnchors[i].onfocus = function() {this.blur();};
 }
}
window.onload = linkNoBorder;
</script>

Html Code:

<ul>
<li><a href=”http://www.naver.com” target=”_blank”>네이버</a></li>
<li><a href=”http://www.empas.com” target=”_blank”>엠파스</a></li>
<li><a href=”http://www.yahoo.com” target=”_blank”>야후</a></li>
</ul> 

Explain:

링크의 테두리에 점선이 생기지 않는다.
원리는 문서안의 A 링크 태그를 찾아서 포커스를 주는 순간 Blur 처리하여 점선이 안나오게 만들어주는~

Example (아래의 예를 확인하세요)

function linkNoBorder() {
var myAnchors = document.getElementsByTagName(‘a’);
for(i=0; i<myAnchors.length; i++) {
myAnchors[i].onfocus = function() {this.blur();};
}
}
window.onload = linkNoBorder;

Published by

안반장

Web과 App 개발을 하고 있으며 최근 워드프레스에 관심이 많아져 네이버 카페 워드프레스 홈페이지의 TF팀으로 활동 중 입니다.개인적으로는 안반장의 개발 노트라는 블로그를 운영하면서 개발의 즐거움과 고충들을 차곡차곡 담아가고 있습니다.

  • css의 outline 속성을 지원하는 브라우저(아마 익스 빼고는 다…)에서는
    a { outline:none; }
    이렇게 해줘도 되요~

    • 오호 새로운걸 알았군요!
      요즘 너무바빠서 공부좀 해야하는데~ 조만간 함 써먹어봐야겠습니다. ^^ 쌩유~