[JavaScript] 바닐라 자바스크립트 disabled, display 속성 추가, 해제(변경)

간혹 자바스크립트에서 disabled 속성과 display 속성을 변경할 때 헷갈리는 경우가 있다.

 

필요할 때 찾아보기 위해서 글을 씁니다.

JavaSctript로 disabled 속성 활성화 or 해제 하기

function disabledFalse() {
    document.querySelector('#name').disabled = false;
    document.querySelector('#email').disabled = false;
    document.querySelector('#phone').disabled = false;
    document.querySelector('#message').disabled = false;
}

위 처럼 내가 원하는 선택자를 선택해준 후 .disabled 속성을 변경해주면 된다.

 

선택자의 경우 <input> 태그나 <button> 태그 등을 말한다.

 

'#선택자의 id 값' => ex) <input id = "name">MyId</input>

 

class로 선택해주고 싶으면 #id 대신 .class이름으로 선택해주면 된다.

ex)

<button class="disBtn"> 태그를 자바스크립트로 선택하려고하면 document.querySelector('.disBtn')

 

false => 활성화 해제: 선택이나 수정 불가능

true -> 활성화: 선택이나 수정 가능

JavaSctript로 display 속성 활성화 or 해제 하기

display 비활성화(안 보이게 하기)

function hideUpdateBtn() {
    document.querySelector('#updateBtn').style.display = 'none';
}

disabled와 마찬가지로 선택자를 선택 후 .style.display = 'none' 으로 바꿔주면 비활성화 된다.

 

disabled와는 조금 다르게 style 속성을 변경해주는 것이다.

 

display 활성화(보이게 하기)

function showUpdateBtn() {
    document.querySelector('#updateBtn').style.display = 'block';
    document.querySelector('#updateBtn').style.display = 'inline';
}

활성화의 경우 block 혹은 inline으로 변경해주면 된다.