-
[자바스크립트 HTML DOM] DOM Style(스타일)JavaScript 2023. 4. 3. 18:08
태그의 style 속성을 가져오거나 새로운 스타일 속성을 추가할 수 있습니다. 이때 inline style에서 작성했던 스타일 property 명을 카멜 표기법으로 바꿔 사용해야 합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .border-red { border: 2px dashed red; } .border-green { border: 2px solid green; } .border-default { border-width: 1px; border-color: blue; border-style: solid; } </style> </head> <body> Text: <br /> <input type="text" id="text1" onblur="changeBorder();" /> <br /> Radio(이메일 수신): <br /> <label> <input type="radio" name="radio_email_yn" value="Y" onclick="showEmail();" /> 동의 </label> <label> <input type="radio" name="radio_email_yn" value="N" onclick="hideEmail();" checked /> 거부 </label> <div id="divEmail" style="display: none"> 이메일<input type="text" id="email" /> </div> <br /> Select: <br /> <select id="select1" onchange="doChange(this);"> <option value=""></option> <option value="KO">Korea</option> <option value="CN">China</option> <option value="JP">Japan</option> </select> <select id="select2" style="display: none"> <option value="">서울</option> <option value="">부산</option> <option value="">대전</option> <option value="">제주</option> </select> <button type="button" onclick="doSave();">Save</button> <br /> <script> function changeBorder() { let text1 = document.getElementById("text1"); if (text1.value !== "") { text1.className = "border-green"; } } function showEmail() { document.getElementById("divEmail").style.display = ""; } function hideEmail() { document.getElementById("divEmail").style.display = "none"; } function doSave() { let text1 = document.getElementById("text1"); if (text1.value === "") { text1.className = "border-red"; return alert("필수 값들을 입력하세요."); } console.log("doSave 실행합니다."); } function doChange(obj) { if (obj.value === "KO") { document.getElementById("select2").style.display = ""; } else { document.getElementById("select2").style.display = "none"; } } </script> </body> </html>Document Text:
Radio(이메일 수신):
Select:
그럼 다음 포스팅은 자바스크립트 메모리 할당에 관해 작성하도록 하겠습니다. 감사합니다
참조 | 바닐라 자바스크립트(고승원, 비제이퍼블릭)
'JavaScript' 카테고리의 다른 글
[자바스크립트의 메모리 관리] 메모리 해제 (0) 2023.04.03 [자바스크립트의 메모리 관리] 메모리 할당 (0) 2023.04.03 [HTML DOM] DOM 이벤트 (0) 2023.04.03 [자바스크립트 HTML DOM] HTML 내용 변경 (0) 2023.03.30 [자바스크립트 HTML DOM] DOM Atrribute (0) 2023.03.29