앵커 태그()와 연결된 HTML DOM 대상 속성은 URL을 클릭한 후 새 웹 페이지가 열리는 위치를 지정합니다. 다음 값을 가질 수 있습니다 -
- _blank - 링크된 문서를 새 창에서 엽니다.
- _parent - 상위 프레임세트에서 링크된 문서를 엽니다.
- _top - 링크된 문서를 본문 창으로 엽니다.
- _self - 링크된 문서를 같은 창에서 엽니다. 이것이 기본 동작입니다.
- framename - 지정된 프레임 이름의 링크된 문서를 엽니다.
구문
다음은 −
의 구문입니다.대상 속성 반환 -
anchorObject.target
대상 속성 설정 -
anchorObject.target = "_blank|_self|_parent|_top|framename"
예시
앵커 대상 속성의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<body>
<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>
<p>Click the button to see the value of the target attribute.</p>
<button onclick="getTarget1()">GetTarget</button>
<button onclick="setTarget2()">SetTarget</button>
<p id="Target1"></p>
<script>
function getTarget1() {
var x = document.getElementById("Anchor").target;
document.getElementById("Target1").innerHTML = x;
}
function setTarget2(){
document.getElementById("Anchor2").innerHTML="Target has been set";
document.getElementById("Target1").target="newframe";
}
</script>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
"GetTarget" 버튼을 클릭한 후 -
"SetTarget" 버튼을 클릭한 후 -
위의 예에서 -
target 속성과 값이 _self인 앵커 태그와 기본 _blank −
인 앵커 태그를 가져왔습니다.<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p> <p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>
그런 다음 각각 getTarget1() 및 setTarget2() 함수를 실행하기 위해 GetTarget 및 SetTarget이라는 두 개의 버튼을 만들었습니다.
<button onclick="getTarget1()">GetTarget</button> <button onclick="setTarget2()">SetTarget</button>
getTarget1()은 첫 번째 링크에서 대상 값을 가져오고 id=”Target1”인 단락 태그에 표시합니다. setTarget2()는 기본 _blank에서 사용자 정의 프레임 "newframe"으로 link2의 대상 값을 설정합니다.
function getTarget1() {
var x = document.getElementById("Anchor").target;
document.getElementById("Target1").innerHTML = x;
}
function setTarget2(){
document.getElementById("Target1").innerHTML="Target has been set";
document.getElementById("Anchor2").target="_blank";
}