HTML classes In Hindi

HTML class attribute का उपयोग HTML element के लिए एक class specify करने के लिए किया जाता है। Multiple HTML element same class share कर सकते हैं।
Mayank Salvi


HTML class attribute

HTML class attribute का उपयोग HTML element के लिए एक class specify करने के लिए किया जाता है।

Multiple HTML element same class share कर सकते हैं।

Using The class Attribute

class attribute का प्रयोग अक्सर एक style sheet में class के name को point करने के लिए किया जाता है। इसका उपयोग JavaScript द्वारा specific class name वाले elements तक पहुंचने और उन्‍हें manipulate करने के लिए भी किया जा सकता है।

निम्नलिखित उदाहरण में हमारे पास "city" value के साथ same class attribute वाले तीन <div> element हैं। तीनों <div> elements .city class के अनुसार एक जैसे style होंगे:

Example


<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>
Copy Code

निम्नलिखित उदाहरण में हमारे पास class attribute के साथ दो <span> element हैं जिनकी value “note” है। <span> elements को .note head section में style definition के अनुसार समान रूप से style किया जाएगा :

Example


<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>
Copy Code

Tip: class attribute किसी भी HTML element पर use किया जा सकता  ।

Note: क्लास का name case sensitive है!

The Syntax For Class

एक class बनाने के लिए; एक period (.) character लिखें, उसके बाद एक class का name लिखें। फिर, curly braces {} के भीतर CSS properties को define करें:

Example

"city" name की एक class बनाएं: 


<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>
Copy Code

Multiple class

HTML element एक से अधिक class से संबंधित हो सकते हैं।

multiple classes को define करने के लिए, class नामों को एक space से अलग करें, उदाहरण के लिए <div class="city main">। element को specify सभी classes के अनुसार style किया जाएगा।

निम्नलिखित उदाहरण में, पहला <h2> element city class और main class दोनों का है , और दोनों classes से CSS styles प्राप्त करेगा: 

Example


<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Copy Code

Different Elements Can Share Same Class

विभिन्न HTML element एक ही class के name को point कर सकते हैं।

निम्नलिखित उदाहरण में, दोनों <h2> और <p> "city" class की ओर इशारा करते हैं और समान style share करेंगे:

Example


<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Copy Code

Use of The class Attribute in JavaScript

specific elements के लिए कुछ कार्य करने के लिए जावास्क्रिप्ट द्वारा class name का भी उपयोग किया जा सकता है।

जावास्क्रिप्ट getElementsByClassName() method के साथ एक specific class name वाले elements तक पहुँच सकता है :

Example

"city" class name वाले सभी elements को छिपाने के लिए एक बटन पर क्लिक करें: 


<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>
Copy Code

Complete Example

"city" class name वाले सभी elements को छिपाने के लिए एक बटन पर क्लिक करें: 


<!DOCTYPE html>
<html>
<body>

<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "city":</p>

<button onclick="myFunction()">Hide elements</button>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

</body>
</html>
Copy Code

Chapter Summary

  • HTML class attribute किसी element के लिए एक या अधिक class name specify करती है
  • CSS और JavaScript द्वारा classes का उपयोग specific elements को चुनने और उन तक पहुँचने के लिए किया जाता है
  • Class attribute किसी भी HTML element पर इस्तेमाल किया जा सकता
  • क्लास का name case sensitive है
  • विभिन्न HTML element एक ही class के name को point कर सकते हैं
  • जावास्क्रिप्ट getElementsByClassName() method के साथ एक specific class name वाले elements तक पहुँच सकता है

Also Read: 

Complete HTML Series In Hindi:  Click Here