문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

======Javascript HTML DOM, Changing CSS======
<WRAP left notice 80%>
  * description : Javascript HTML DOM, Changing CSS 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-20
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/js/js_htmldom_css.asp|Javascript HTML DOM, Changing CSS]]
\\
%%HTML DOM%%을 사용하면 %%JavaScript%%가 %%HTML%% 요소의 스타일을 변경할 수 있습니다.\\

=====Changing HTML Style=====
%%HTML%% 요소의 스타일을 변경하려면 다음 구문을 사용하십시오:
<code html>
document.getElementById(id).style.property = new style
</code>
\\
다음 예제는 ''%%<p>%%'' 요소의 스타일을 변경합니다.\\

====예제====
<code javascript>
<!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>
</code>

=====Using Events=====
%%HTML DOM%%을 사용하면 이벤트가 발생할 때 코드를 실행할 수 있습니다.\\
\\
%%HTML%% 요소에 아래와 같은 "동작이 발생"하면 브라우저에서 이벤트를 생성합니다.\\

  * 요소가 클릭 됨
  * 페이지가 로딩 
  * 입력 필드(input fields)가 변경됨

다음 예제는 사용자가 버튼을 클릭할 때, ''%%id="id1"%%''를 가진 %%HTML%% 요소의 스타일을 변경합니다.\\

====예제====
<code javascript>
<!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>
</code>

=====Visibility=====
요소를 보이고 보이지 않게 하는 방법
<code javascript>
<!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>
</code>

=====HTML DOM Style Object Reference=====
모든 %%HTML DOM%% 스타일 속성에 대해서는 [[https://www.w3schools.com/jsref/dom_obj_style.asp|HTML DOM Style Object Reference]]를 참조하십시오.















{{tag>오션, Javascript HTML DOM, Changing CSS}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구