HTML DOM Link rel 속성은 현재 문서와 링크된 문서 간의 관계를 설정/반환하며 반드시 언급해야 합니다.
구문
다음은 구문입니다 -
- rel 반환 속성 값
linkObject.rel
- rel 설정 valueString으로
linkObject.rel = valueString
값 문자열
여기서 "valueString" 다음과 같을 수 있습니다 -
| 값 문자열 | 설명 |
|---|---|
| 대체 | 제공 |
| 저자 | 링크된 문서의 작성자에 대한 링크를 제공합니다. |
| dnsprefetch | 브라우저가 대상 리소스의 출처에 대한 DNS 확인을 선제적으로 수행해야 함을 지정합니다. |
| 도움말 | 있는 경우 도움말 문서에 대한 링크를 제공합니다. |
| 아이콘 | 문서를 나타내는 아이콘을 가져옵니다. |
| 상대 | 현재 문서와 링크된 문서 간의 관계를 설정/반환합니다. |
| 라이센스 | 링크된 문서에 대한 저작권 정보 제공 |
| 다음 | 문서 시리즈의 다음 문서에 대한 링크를 제공합니다. |
| 핑백 | 현재 링크된 문서에 대한 핑백을 처리하는 핑백 서버의 주소를 제공합니다. |
| 사전 연결 | 브라우저가 대상 리소스의 원본(있는 경우)에 미리 연결해야 함을 지정합니다. |
| 프리페치 | 문서의 후속 탐색에 필요하므로 브라우저가 대상 리소스를 미리 가져와 캐시해야 함을 지정합니다. |
| 미리 로드 | 브라우저 에이전트가 "as" 속성에 의해 지정된 대상에 따라 현재 탐색을 위한 대상 리소스를 미리 가져오고 캐시해야 함을 지정합니다. ). |
| 미리 렌더링 | 브라우저가 백그라운드에서 지정된 웹 페이지를 로드해야 함을 지정합니다. 따라서 사용자가 이 페이지로 이동하면 페이지 로드 속도가 빨라집니다. |
| 이전 | 문서가 시리즈의 일부이며 시리즈의 이전 문서가 참조 링크된 문서임을 나타냅니다. |
| 검색 | 현재 문서 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스에 대한 링크를 제공합니다. |
| 스타일시트 | 현재 문서의 스타일 시트를 가져옵니다. |
예시
Link rel의 예를 살펴보겠습니다. 속성 -
<!DOCTYPE html>
<html>
<head>
<title>Link rel</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-rel</legend>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
if(extStyle.rel === 'stylesheet')
divDisplay.textContent = 'The linked document is of type stylesheet';
else
divDisplay.textContent = 'The linked document is of type '+extStyle.rel;
</script>
</body>
</html>입니다. 위의 예에서 'style.css' 포함 -
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
} 출력
이것은 다음과 같은 출력을 생성합니다 -
