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

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

======JavaScript / jQuery CSS Styles======
<WRAP left notice 80%>
  * description : JavaScript / jQuery CSS Styles
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-14
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://www.w3schools.com/js/js_jquery_css.asp|JavaScript / jQuery CSS Styles]]
\\

=====Hiding HTML Elements=====
%%HTML%% 요소를 숨깁니다.\\

====JQuery====
<code jquery>
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

  <h1 id="01">Hiding Text Content with JQuery</h1>

  <h2 id="02">Hello World!</h2>
  <h2 id="03">Hello Swiss!!</h2>
  <h2 id="04">Hello Denmark!!!</h2>

  <p id="demo"></p>

  <script>
    $(document).ready(function () {
      var myElement = $('#02');
      myElement.hide();
    });
  </script>

</body>
</html>
</code>

====JavaScript====
<code javascript>
<!DOCTYPE html>
<html lang="en">
<body>
  
  <h1 id="01">Hiding Text Content</h1>

  <h2 id="02">Hello World!</h2>
  <h2 id="03">Hello Swiss!!</h2>
  <h2 id="04">Hello Denmark!!!</h2>

  <p id="demo"></p>

  <script>
    document.getElementById("02").style.display = "none";
  </script>

</body>
</html>
</code>

=====Showing HTML Elements=====
%%HTML%% 요소를 나타냅니다.\\

====JQuery====
<code html>
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

  <h1>Showing HTML Elements with JQuery</h1>

  <h2 id="01" style="display:none">Bonjour</h2>
  <h2 id="02" style="display:none">Bonsoir</h2>
  <h2 id="03" style="display:none">Je t'aime</h2>

  <script>
    $(document).ready(function () {
      var myElement = $('#03');
      myElement.show();
    });
  </script>

</body>
</html>
</code>

====JavaScript====
<code html>
<!DOCTYPE html>
<html lang="en">
<body>

  <h1>Showing HTML Elements with JavaScript</h1>

  <h2 id="01" style="display:none">Bonjour</h2>
  <h2 id="02" style="display:none">Bonsoir</h2>
  <h2 id="03" style="display:none">Je t'aime</h2>

  <script>
    var myElement = document.getElementById("03");
    myElement.style.display = "";
  </script>

</body>
</html>
</code>

=====Styling HTML Elements=====
%%HTML%% 요소의 글꼴 크기를 변경합니다.\\

====JQuery====
<code jquery>
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

  <h2>Styling HTML Elements with JQuery</h2>

  <p id="demo">JavaScript can change the style of an HTML element.</p>
  
  <script>
    $(document).ready(function () {
      var myElement = $("#demo");
      myElement.css("font-size", "35px");
    });
  </script>

</body>
</html>
</code>

====JavaScript====
<code javascript>
<!DOCTYPE html>
<html lang="en">
<body>

  <h2>Styling HTML Elements with JavaScript</h2>

  <p id="demo">JavaScript can change the style of an HTML element.</p>

  <script>
    var myElement = document.getElementById("demo");
    myElement.style.fontSize = "35px";
  </script>

</body>
</html>
</code>




{{tag>오션 JavaScript jQuery CSS Styles}}

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

사용자 도구

사이트 도구

문서 도구