자바스크립트 toggleAttribute() 함수 – 요소에 부울 속성 추가/제거 상태 바꾸기

`Element.toggleAttribute()` 사용법

toggleAttribute() 함수는
DOM 요소에 지정한 부울 속성이 없으면 추가하고, 있으면 제거하는 함수입니다.
해당 속성을 추가할 경우에는 false를 반환하고, 제거할 경우에는 tue를 반환합니다.

HTML 속성 중에서 값을 필요로 하지 않는 속성을 부울 속성(boolean attribute)이라고 합니다.
예를 들자면 hidden, open, autoplay 등의 속성이 부울 속성에 해당합니다.

구문

매개변수

toggleAttribute() 함수의 매개변수
`attributeName`	필수. 지정하려는 부울 속성의 이름(문자열 형식)입니다. 대소문자를 구분하지 않습니다.
`force`	옵션. `true` 또는 `false` 값을 가질 수 있습니다. `true`로 설정하면 지정한 부울 속성이 해당 요소에 있거나 없거나 상관없이 강제로 추가합니다. (즉, 현재 부울 속성의 값을 `true`로 설정하라는 의미입니다.) `false`로 설정하면 지정한 부울 속성이 해당 요소에 있거나 없거나 상관없이 강제로 제거합니다. (즉, 현재 부울 속성의 값을 `false`로 설정하라는 의미입니다.)

반환 값

지정한 속성을 추가할 경우에는 false를 반환하고,
제거할 경우에는 true를 반환합니다.

예제

세 가지 예제를 통해서 toggleAttribute() 함수를 사용하는 방법에 대해 알아보겠습니다.

일반적인 사용법

다음은 "input box 숨기기/표시하기" 버튼을 클릭하면,
<input> 요소에 hidden 속성을 추가하거나 제거함으로써, <input> 요소를 숨기거나 표시하는 예제입니다.

hidden 속성은 해당 요소가 시각적으로 보이지 않고 숨겨진 요소임을 나타내는 속성입니다.

JavaScript

const elem = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // <input> 요소에 hidden 속성이 없으면 추가, 있으면 제거함
    elem.toggleAttribute("hidden");
});

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

toggleAttribute() 함수로 <input> 요소에 hidden 속성을 추가하면 <input> 요소는 숨겨집니다. 반대로 제거하면 <input> 요소는 원래대로 표시됩니다.

반환 값을 이용한 사용법

toggleAttribute() 함수의 반환 값을 사용하는 예제입니다.
지정한 속성을 추가할 경우에는 false를 반환하고, 제거할 경우에는 true를 반환합니다.

이때 "input box 숨기기/표시하기" 버튼을 클릭하면 <p> 요소에 hidden 속성을 추가했는지, 아니면 제거했는지가 표시됩니다.

HTML

<input type="text">
<button type="button">input box 숨기기/표시하기</button>
<p style="color: red;">
    hidden 속성이 추가되었는지 제거되었는지가 표시됩니다.
</p>

JavaScript

const inputElem = document.querySelector("input");
const button = document.querySelector("button");
const msgElem = document.querySelector("p");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    if (inputElem.toggleAttribute("hidden")) { // hidden 속성을 제거하면
        msgElem.textContent = "hidden 속성이 제거되었습니다.";
    } else { // hidden 속성을 추가하면
        msgElem.textContent = "hidden 속성이 추가되었습니다.";
    }
});

코드 부연설명
textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

hidden 속성을 추가할 경우에는 false를 반환하고, 제거할 경우에는 true를 반환합니다.

두 번째 매개변수(`force`)를 이용한 사용법

toggleAttribute() 함수의 두 번째 매개변수(force)는 옵션(선택사항)으로, true 또는 false 값을 가질 수 있습니다.

true로 설정하면 지정한 부울 속성이 해당 요소에 있거나 없거나 상관없이 강제로 추가합니다.
(즉, 현재 부울 속성의 값을 true로 설정하라는 의미입니다.)
false로 설정하면 지정한 부울 속성이 해당 요소에 있거나 없거나 상관없이 강제로 제거합니다.
(즉, 현재 부울 속성의 값을 false로 설정하라는 의미입니다.)

hasAttribute() 함수를 사용해서 <input> 요소에 hidden 속성이 있는지를 체크해서 있으면, toggleAttribute() 함수의 두 번째 매개변수(force)를 false로 설정해서 강제로 hidden 속성을 제거하고, 반대로 없으면 true로 설정해서 강제로 hidden 속성을 추가합니다.

hasAttribute() 함수DOM 요소에 지정한 속성이 있는지 체크하는 함수입니다.
해당 요소에 지정한 속성이 있으면 true를 반환하고, 없으면 false를 반환합니다.

hasAttribute() 함수

JavaScript

const elem = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    if (elem.hasAttribute("hidden")) { // hidden 속성이 있는지 체크
        elem.toggleAttribute("hidden", false); // 강제로 hidden 속성을 제거
    } else {
        elem.toggleAttribute("hidden", true); // 강제로 hidden 속성을 추가
    }
});