HTML DOM의 Link disabled 속성은 <link> 요소가 활성화되어 있는지 비활성화되어 있는지를 설정하거나 반환하는 속성입니다. 이 속성을 활용하면 자바스크립트를 통해 외부 스타일시트의 적용 여부를 동적으로 제어할 수 있습니다.
문법(Syntax)
disabled 속성의 기본 문법은 다음과 같습니다.
1. boolean 값 반환하기
<link> 요소의 현재 상태를 true 또는 false 값으로 가져옵니다.
linkObject.disabled
2. disabled 값 설정하기
<link> 요소를 활성화하거나 비활성화합니다.
linkObject.disabled = booleanValue
boolean 값 종류
여기서 booleanValue에 사용할 수 있는 값은 다음과 같습니다.
| booleanValue | 설명 |
|---|---|
| true | <link> 요소가 비활성화된 상태임을 의미합니다. 즉, 해당 스타일시트가 적용되지 않습니다. |
| false | <link> 요소가 비활성화되지 않은(활성화된) 상태임을 의미합니다. 이 값이 기본값(default)입니다. |
예제 코드
이제 Link 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;
}실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'Disable Styling' 버튼 클릭 전
외부 스타일시트가 정상적으로 적용되어 폼과 버튼에 스타일이 반영되어 있습니다.
'Disable Styling' 버튼 클릭 후
버튼을 클릭하면 beautify() 함수가 실행되어 <link> 요소의 disabled 값이 true로 설정되고, 외부 스타일시트가 더 이상 적용되지 않아 페이지 스타일이 사라집니다.
정리
HTML DOM의 Link disabled 속성은 <link> 요소를 통해 연결된 외부 리소스(주로 스타일시트)의 활성화 여부를 손쉽게 제어할 수 있는 강력한 도구입니다. 이를 활용하면 테마 전환, 다크 모드 구현, 특정 조건에서만 스타일을 적용하는 등의 동적인 웹 페이지 개발이 가능합니다.