Element.toggleAttribute()
사용법
toggleAttribute()
함수는
DOM 요소에 지정한 부울 속성이 없으면 추가하고, 있으면 제거하는 함수입니다.
해당 속성을 추가할 경우에는 false
를 반환하고, 제거할 경우에는 tue
를 반환합니다.
HTML 속성 중에서 값을 필요로 하지 않는 속성을 부울 속성(boolean attribute)이라고 합니다.
예를 들자면 hidden
, open
, autoplay
등의 속성이 부울 속성에 해당합니다.
구문
매개변수
attributeName |
필수. 지정하려는 부울 속성의 이름(문자열 형식)입니다.
대소문자를 구분하지 않습니다. |
---|---|
force |
옵션. true 또는 false 값을 가질 수 있습니다.
|
반환 값
- 지정한 속성을 추가할 경우에는
false
를 반환하고, - 제거할 경우에는
true
를 반환합니다.
예제
세 가지 예제를 통해서 toggleAttribute()
함수를 사용하는 방법에 대해 알아보겠습니다.
일반적인 사용법
hidden
속성은 해당 요소가 시각적으로 보이지 않고 숨겨진 요소임을 나타내는 속성입니다.
코드 부연설명
querySelector()
함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.
반환 값을 이용한 사용법
toggleAttribute()
함수의 반환 값을 사용하는 예제입니다.
지정한 속성을 추가할 경우에는 false
를 반환하고, 제거할 경우에는 true
를 반환합니다.
다음은 "input box 숨기기/표시하기" 버튼을 클릭하면,
<input>
요소에 hidden
속성을 추가하거나 제거함으로써, <input>
요소를 숨기거나 표시하는 예제입니다.
이때 "input box 숨기기/표시하기" 버튼을 클릭하면 <p>
요소에 hidden
속성을 추가했는지, 아니면 제거했는지가 표시됩니다.
hidden
속성을 추가할 경우에는 false
를 반환하고, 제거할 경우에는 true
를 반환합니다.
hidden 속성이 추가되었는지 제거되었는지가 표시됩니다.
두 번째 매개변수(force
)를 이용한 사용법
toggleAttribute()
함수의 두 번째 매개변수(force
)는 옵션(선택사항)으로, true
또는 false
값을 가질 수 있습니다.
true
로 설정하면 지정한 부울 속성이 해당 요소에 있거나 없거나 상관없이 강제로 추가합니다.
(즉, 현재 부울 속성의 값을true
로 설정하라는 의미입니다.)false
로 설정하면 지정한 부울 속성이 해당 요소에 있거나 없거나 상관없이 강제로 제거합니다.
(즉, 현재 부울 속성의 값을false
로 설정하라는 의미입니다.)
다음은 "input box 숨기기/표시하기" 버튼을 클릭하면,
<input>
요소에 hidden
속성을 추가하거나 제거함으로써, <input>
요소를 숨기거나 표시하는 예제입니다.
hasAttribute()
함수를 사용해서 <input>
요소에 hidden
속성이 있는지를 체크해서 있으면, toggleAttribute()
함수의 두 번째 매개변수(force
)를 false
로 설정해서 강제로 hidden
속성을 제거하고, 반대로 없으면 true
로 설정해서 강제로 hidden
속성을 추가합니다.
hasAttribute()
함수DOM 요소에 지정한 속성이 있는지 체크하는 함수입니다.
해당 요소에 지정한 속성이 있으면 true
를 반환하고, 없으면 false
를 반환합니다.
브라우저 호환성
메서드 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
toggleAttribute()
|
69 | 18 | 63 | 12 |
명세서
명세서 사양 | |
---|---|
toggleAttribute()
|
DOM Standard #ref-for-dom-element-toggleattribute① |
같이 보기
- 자바스크립트 getAttribute() 함수 – 요소에서 속성 값 가져오기
- 자바스크립트 setAttribute() 함수 – 요소에 속성 값 설정이나 속성 추가하기
- 자바스크립트 removeAttribute() 함수 – 요소에 지정한 속성 제거하기
- 자바스크립트 hasAttribute() 함수 - 요소에 지정한 속성이 있는지 체크
- 자바스크립트 classList.add() - 요소에 클래스 값 추가하기
- 자바스크립트 classList.toggle() – 요소에 클래스 값이 없으면 추가, 있으면 제거하기
- HTML 속성 소개
- 자바스크립트 DOM 요소 속성을 다루는 공통 함수