HTML DOM의 Link 객체는 HTML 문서 내의 <link> 요소를 대표하는 객체입니다. <link> 요소는 주로 외부 스타일시트(CSS)나 파비콘 등 외부 리소스를 현재 문서에 연결할 때 사용됩니다.
문법(Syntax)
다음은 Link 객체의 기본적인 사용 문법입니다.
<link> 요소 생성하기
var linkObject = document.createElement("LINK")주요 속성(Properties)
Link 객체는 아래와 같은 속성들을 제공합니다.
| 속성 | 설명 |
|---|---|
| crossOrigin | 연결된 문서의 CORS 설정을 지정하거나 반환합니다. |
| disabled | 연결된 문서(스타일시트 등)가 비활성화되어 있는지 여부를 설정하거나 반환합니다. |
| href | 연결된 문서의 URL을 설정하거나 반환합니다. |
| hreflang | 연결된 문서의 언어 코드를 설정하거나 반환합니다. |
| media | <link> 요소에 적용할 미디어 유형을 설정하거나 반환합니다. |
| rel | 현재 문서와 연결된 문서 사이의 관계를 설정하거나 반환합니다. |
| sizes | 연결된 문서의 sizes 속성 값을 반환합니다. |
| type | 연결된 문서의 콘텐츠 유형(MIME 타입)을 설정하거나 반환합니다. |
예제(Example)
다음은 disabled 속성을 활용한 예제입니다. 버튼 클릭 시 외부 스타일시트의 적용을 해제하여 페이지의 스타일링을 비활성화할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Link Disabled</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-disabled</legend>
<label for="WeekSelect">Sales Target Week:
<input type="week" id="WeekSelect" value="2020-W13" disabled>
</label>
<input type="button" onclick="enableWeekInput()" value="Change Sales Target Week">
<input type="button" onclick="beautify()" value="Disable Styling">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
var extStyle = document.getElementById("extStyle");
divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
function enableWeekInput() {
inputWeek.disabled = false;
divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
}
function beautify(){
extStyle.disabled = true;
}
</script>
</body>
</html>위 예제에서 참조되는 'style.css' 파일의 내용은 다음과 같습니다.
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Disable Styling' 버튼을 클릭하기 전 화면입니다.
'Disable Styling' 버튼을 클릭한 후 화면입니다. 외부 스타일시트가 비활성화되면서 기존에 적용되던 스타일이 사라지는 것을 확인할 수 있습니다.
