[ 자바스크립트 ] className 사용법

출처 : w3schools.com (영문)

 
   <div class="myStyle"> my Division </div>
   <p class="myStyle"> my Paragraph </p>

   <button onclick="useClassName()"> Click me </button>
   <p id="demo"></p>

   <script type="text/javascript">

      function useClassName (){ 

	    var tags = document.getElementsByClassName( "myStyle" ); 
	    var text = tags[ 0 ].innerHTML; 

	    document.getElementById ( "demo" ).innerHTML = text; 
      } 
   </script>
 

실행 결과를 보려면, 아래 버튼을 클릭하세요.

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

---

 
   <div class="myStyle"></div>
   <div class="divStyle"></div>

   <button onclick="getClassName_with_tagName()"> Click me </button>
   <p id="demo"></p>

   <script type="text/javascript">

      function getClassName_with_tagName (){ 

	      var tags = document.getElementsByTagName( "DIV" ); 
	      var className = tags[ 0 ].className; 

	      document.getElementById ( "demo" ).innerHTML = className; 
      } 
   </script>
 

아래 버튼을 클릭하세요.

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

---

 
   <div class="divStyle"></div>
   <div id="myDIV" class="myStyle test example"></div>

   <button onclick="getClassName_with_id()"> Click me </button>
   <p id="demo"></p>

   <script type="text/javascript">

      function getClassName_with_id (){ 

	      var tag = document.getElementById( "myDIV" ); 
	      var className = tag.className; 

	      document.getElementById ( "demo" ).innerHTML = className; 
      } 
   </script>
 

아래 버튼을 클릭하세요.

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

---

 
   <P class="myStyle"></P>
   <DIV class="test myStyle"></DIV>
   <DIV class="myStyle test example"></DIV>

   <DIV id="mydiv"></DIV>

   <button onclick="total_of_sameClass()"> Click me </button>
   <p id="demo"></p>

   <script type="text/javascript">

      function total_of_sameClass (){ 

	   var tags = document.getElementsByClassName( "myStyle" ); 
	   var total = tags.length; 

	   document.getElementById ( "demo" ).innerHTML = total; 
      } 
   </script>
 

아래 버튼을 클릭하세요.

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

---

 
   <div id="myDIV"></div>

   <button onclick="setClassName()"> Click me </button>

   <script type="text/javascript">

      function setClassName (){ 		document.getElementById( "myDIV" ).className = "myStyle"; 	} 

   </script>
 

아래 버튼을 클릭하세요.

<div id="myDIV"></div>

---

 
   <div id="myDIV" class="anotherStyle"></div>

   <button onclick="setClassName()"> Click me </button>

   <script type="text/javascript">

      function setClassName (){ 		document.getElementById( "myDIV" ).className = "myStyle"; 	} 

   </script>
 

아래 버튼을 클릭하세요.

<div id="myDIV" class="anotherStyle"></div>

---

 
   <div id="myDIV" class="myStyle"></div>
   <p id="myP"></p>

   <button onclick="addClassName()"> Click me </button>

   <script type="text/javascript">

      function addClassName (){ 

	    document.getElementById ( "myDIV" ).className  += " example"; 
	    document.getElementById ( "myP" ).className  += " example"; 
      } 

   </script>
 

아래 버튼을 클릭하세요.

<div id="myDIV" class="myStyle"></div>
<p id="myP"></p>

---

 
   <div class="myStyle"> my Division </div>
   <p class="myStyle"> my Paragraph </p>

   <button onclick="changeText()"> Click me </button>

   <script type="text/javascript">

      function changeText (){ 

	      var tags = document.getElementsByClassName( "myStyle" );
	      tags[ 1 ].innerHTML = "change Paragraph!!!";
      } 
   </script>
 

아래 버튼을 클릭하세요.

<div class="myStyle"> my Division </div>
<p class="myStyle"> my Paragraph </p>

---

 
   <div class="myStyle" id="myDIV"> my Division </div>
   <p class="myStyle" id="myP"> my Paragraph </p>

   <button onclick="changeStyle()"> Click me </button>

   <script type="text/javascript">

      function changeStyle (){ 

	      var tagA = document.getElementById( "myDIV" ); 
	      if ( tagA.className === "myStyle" ){ 	tagA.style.backgroundColor = "DarkGoldenRod"; 	 } 

	      var tagB = document.getElementsByClassName( "myStyle" ); 

	      for ( var x = 0; x < tagB.length; x++ ){ 
		   if ( tagB[ x ].id === "myP" ){ 	tagB[ x ].style.backgroundColor = "SteelBlue"; 	 } 
	      } 

   } 
   </script>
 

아래 버튼을 클릭하세요.

 my Division 
 my Paragraph 

---

 
   <div> another Section </div>

   <div class="mystyle"> my Section </div>
   <p class="mystyle"> my Paragraph </p>

   <ul>
	<li class="mystyle"> my List </li>
	<li> another List </li>
   </ul>

   <button onclick="changeAll()"> Click me </button>

   <script type="text/javascript">

      function changeAll (){ 

	   var tags = document.getElementsByClassName( "mystyle" ); 

	   for ( var x = 0; x < tags.length; x++ ){ 	tags[ x ].style.fontWeight = "bold"; 	} 
   } 
   </script>
 

아래 버튼을 클릭하세요.

another Section

my Section

my Paragraph

• my List
• another List

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*