Javascript HTML DOM, Changing CSS

description : Javascript HTML DOM, Changing CSS
author : 오션
email : shlim@repia.com
lastupdate : 2021-04-20

Source of the article

Javascript HTML DOM, Changing CSS

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를 참조하십시오.

오션,, Javascript, HTML, DOM,, Changing, CSS