element.setAttribute(attributeName, value)
<input type="password" value="test">
<button type="button">비밀번호 보기</button>
const elem = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    /* 버튼을 클릭하면,
       input 요소의 type 속성 값이 password에서 text로 설정됨 */
    elem.setAttribute("type", "text");
});
실제 적용된 모습 "비밀번호 보기" 버튼을 클릭해 보세요!
<input type="text">
<button type="button">test 입력하기</button>
const elem = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    /* 버튼을 클릭하면,
       input 요소의 value 속성이 없지만,
       value 속성과 값이 test로 설정 */
    elem.setAttribute("value", "test");
});
실제 적용된 모습 "test 입력하기" 버튼을 클릭해 보세요!
<input type="text">
<button type="button">input box 숨기기</button>
const elem = document.querySelector("input");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    /* 버튼을 클릭하면,
       input 요소에 hidden 속성을 추가하기
       value는 빈 문자열("")로 설정 */
    elem.setAttribute("hidden", "");
});
실제 적용된 모습 "input box 숨기기" 버튼을 클릭해 보세요!
element.setAttribute("style", "background-color:blue;");
element.style.backgroundColor = "blue";