wiki:javascript:javascript_note:dom_css
목차
Javascript HTML DOM, Changing CSS
- description : Javascript HTML DOM, Changing CSS
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-20
Source of the article
HTML DOM을 사용하면 JavaScript가 HTML 요소의 스타일을 변경할 수 있습니다.
Changing HTML Style
HTML 요소의 스타일을 변경하려면 다음 구문을 사용하십시오:
document.getElementById(id).style.property = new style
다음 예제는 <p> 요소의 스타일을 변경합니다.
예제
<!DOCTYPE html> <html> <body> <p id="p1">Hello World!</p> <p id="p2">Bonjour les enfants!!</p> <script> document.getElementById("p2").style.color = "blue"; document.getElementById("p2").style.fontFamily = "Arial"; document.getElementById("p2").style.fontSize = "larger"; </script> <p>The paragraph above was changed by a script.</p> </body>
</code>
Using Events
HTML DOM을 사용하면 이벤트가 발생할 때 코드를 실행할 수 있습니다.
HTML 요소에 아래와 같은 “동작이 발생”하면 브라우저에서 이벤트를 생성합니다.
- 요소가 클릭 됨
- 페이지가 로딩
- 입력 필드(input fields)가 변경됨
다음 예제는 사용자가 버튼을 클릭할 때, id="id1"를 가진 HTML 요소의 스타일을 변경합니다.
예제
<!DOCTYPE html> <html> <body> <h1 id="id1">My Heading 1</h1> <button type="button" onclick="document.getElementById('id1').style.color = 'red'">Click Me!</button> </body> </html>
Visibility
요소를 보이고 보이지 않게 하는 방법
<!DOCTYPE html> <html> <body> <p id="p1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quo accusamus doloremque alias sapiente enim praesentium magni autem, iusto quia. </p> <input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'"> <input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'"> </body> </html>
HTML DOM Style Object Reference
모든 HTML DOM 스타일 속성에 대해서는 HTML DOM Style Object Reference를 참조하십시오.
/volume1/web/dokuwiki/data/pages/wiki/javascript/javascript_note/dom_css.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
