목차

JavaScript / jQuery CSS Styles

  • description : JavaScript / jQuery CSS Styles
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-14


Ref

JavaScript / jQuery CSS Styles

Hiding HTML Elements

HTML 요소를 숨깁니다.

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>

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>

Showing HTML Elements

HTML 요소를 나타냅니다.

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>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>

JavaScript

<!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>

Styling HTML Elements

HTML 요소의 글꼴 크기를 변경합니다.

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>

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>
, , , ,