HTML DOM Link href 속성 완벽 가이드 – 문서 경로 설정 및 반환 방법

HTML DOM의 Link href 속성은 <link> 요소로 연결된 문서의 경로(path) 또는 URL을 설정하거나 반환하는 데 사용됩니다. 주로 외부 스타일시트(CSS)를 동적으로 교체할 때 유용하게 활용됩니다.

문법(Syntax)

href 속성의 기본 문법은 다음과 같습니다.

1. href 값 반환하기

linkObject.href

2. href 값 설정하기

linkObject.href = string

속성값 설명

여기서 string은 아래와 같은 값을 가질 수 있습니다.

속성값	설명
path	연결할 문서의 절대 경로 또는 상대 경로를 정의합니다.
url	연결할 문서의 URL 주소를 정의합니다.

예제(Example)

다음은 Link href 속성을 활용한 실제 예제입니다. 버튼 클릭 시 외부 스타일시트를 동적으로 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>Link href</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-href</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="changeStyle()" value="Change Style">
<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 changeStyle(){
        extStyle.href = 'anotherStyle.css';
    }
</script>
</body>
</html>

위 예제에서 처음 연결된 'style.css' 파일의 내용은 다음과 같습니다.

form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}

그리고 'Change Style' 버튼 클릭 시 적용되는 'anotherStyle.css' 파일의 내용은 다음과 같습니다.

form {
    width:70%;
    margin: 0 auto;
    text-align: center;
    background-color: rgba(0,0,0,0.7);
    color: white;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Change Style' 버튼을 클릭하기 전 화면입니다.

HTML DOM Link href 속성 완벽 가이드 – 문서 경로 설정 및 반환 방법

'Change Style' 버튼을 클릭한 후 화면입니다. 스타일시트가 동적으로 교체되어 배경색과 글자색이 변경된 것을 확인할 수 있습니다.

HTML DOM Link href 속성 완벽 가이드 – 문서 경로 설정 및 반환 방법

정리

HTML DOM의 Link href 속성을 활용하면 자바스크립트만으로 페이지를 새로고침하지 않고도 외부 스타일시트를 실시간으로 교체할 수 있습니다. 이는 다크 모드 전환, 테마 변경 기능 등을 구현할 때 매우 유용한 기법입니다.