| Element.getAttribute(name) | 속성값 가지고오기 |
| Element.setAttribute(name, value) | 속성 추가하기 |
| Element.hasAttribute(name); | 속성 유무 확인하기 |
| Element.removeAttribute(name); | 속성 제거하기 |
const la = document.querySelector('#la');
document.write( la.getAttribute('class') + "<br>" ); //lalala
document.write( la.hasAttribute('title') + "<br>" ); //false
la.setAttribute('title', '타이틀입니다.'); //title 속성을 만듬
document.write( la.hasAttribute('title') + "<br>" ); //true
la.removeAttribute('title'); //title 속성을 지움
document.write( la.hasAttribute('title') + "<br>" ); //false
setAttribute는 기존의 속성값을 지우고 추가한다.
예제
버튼을 클릭해 보세요!
<!DOCTYPE html>
<html>
<style>
* {margin: 0; padding: 0;}
.zB {
width: 200px; height: 200px;
line-height: 200px; text-align: center;
color: red; font-size: 20px;
}
.zCrircle {border-radius: 50%; background-color: pink; text-align: center;}
.zBox {background-color: pink; text-align: center;}
button {width: 100px; height: 40px; border: 1px solid gray; margin-top: 20px;}
</style>
<body>
<div id="zB" class="zB">버튼을 클릭해 보세요!</div>
<button id="cBtn">원</button>
<button id="rBtn">박스</button>
<button id="sBtn">초기화</button>
<script>
const zB = document.querySelector('#zB');
const cBtn = document.querySelector('#cBtn');
const rBtn = document.querySelector('#rBtn');
const sBtn = document.querySelector('#sBtn');
cBtn.onclick = function(){
zB.setAttribute('class', 'zB zCrircle')
}
rBtn.onclick = function(){
zB.setAttribute('class', 'zB zBox')
}
sBtn.onclick = function(){
zB.setAttribute('class', 'zB')
}
</script>
</body>
</html>반응형
'JAVASCRIPT' 카테고리의 다른 글
| JAVASCRIPT ) 이벤트 (0) | 2024.07.16 |
|---|---|
| JAVASCRIPT ) setInterval / setTimeout (0) | 2024.07.15 |
| JAVASCRIPT ) DOM 제어대상 선택자 (0) | 2024.07.15 |
| JAVASCRIPT ) 자바스크립트로 스타일 주기 (0) | 2024.07.15 |
| JAVASCRIPT ) 숫자판 예제 (0) | 2024.07.10 |
