Written by java-style
on 2021-11-17

[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 속성을 변경해주면 된다.

선택자의 경우 태그나 태그 등을 말한다.

'#선택자의 id 값' => ex) MyId

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

ex)

태그를 자바스크립트로 선택하려고하면 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 = 'bock'; document.querySelector('#updateBtn').style.display = 'inline'; }

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

from http://spacejin.tistory.com/14 by ccl(A) rewrite - 2021-11-17 12:02:08

Top