100% کامل شده تا
به‌روزرسانی شده در: ۶ روز پیش

ویژگی class در اچ‌تی‌ام‌ال (HTML class Attribute)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial(تغییرمسیر از ویژگی class در html)
پرش به ناوبری پرش به جستجو


ویژگی class در HTML برای تعیین کلاس برای یک عنصر HTML استفاده می‌شود.[۱]

چندین عنصر HTML می‌توانند یک کلاس را به اشتراک بگذارند.


استفاده از ویژگی class

ویژگی class اغلب برای اشاره به نام کلاس در یک استایل آبشاری استفاده می‌شود. همچنین می‌تواند توسط جاوااسکریپت برای دسترسی و دستکاری دیگر عناصر با نام کلاس خاص نیز استفاده شود.

در مثال زیر ما سه عنصر <div> با ویژگی class با مقدار "city" داریم. هر سه عنصر <div> مطابق استایل‌دهی .city در بخش head، به‌طور یکسان طراحی می‌شوند:

مثال

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

Responsive demo.svg


در مثال زیر ما دو عنصر <div> با ویژگی class با مقدار "note" داریم. هر دو عنصر <div> مطابق استایل‌دهی class در بخش head، به‌طور یکسان طراحی می‌شوند:

مثال

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

Responsive demo.svg


نکته: ویژگی class را می‌توان در هر عنصر HTML استفاده کرد.
توجه: نام کلاس به حروف بزرگ و کوچک حساس است!
نکته: می‌توانید در مورد سی‌اس‌اس در آموزش CSS ما بیشتر مطالعه کنید.




زبان نگارش کلاس

برای ایجاد کلاس؛ یک کاراکتر نقطه . بنویسید، و بعد نام کلاس را بنویسید. سپس، ویژگی‌های CSS را در داخل براکت‌ها { } تعریف کنید:

مثال

یک کلاس با نام «شهر» ایجاد کنید:

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

Responsive demo.svg



چند کلاس

عناصر HTML می‌توانند به بیش از یک کلاس تعلق داشته باشند.

برای تعریف چندین کلاس، نام کلاس‌ها را با فاصله استفاده کنید، به عنوان مثال. <div class = "city main">. عنصر مطابق با تمام کلاس‌های مشخص شده استایل داده می‌شود.

در مثال زیر، اولین عنصر <h2> به هر دو کلاس “city” و “main” تعلق دارد و سبک‌های CSS را از هر دو کلاس دریافت می‌کند:

مثال

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

مثال

.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 

.main {
  text-align: center;
}

مثال

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

.main {
  text-align: center;
}
</style>
</head>
<body>

<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which center-aligns the text.</p>

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

</body>
</html>

Responsive demo.svg



عناصر مختلف می‌توانند یک کلاس را به اشتراک بگذارند

عناصر مختلف HTML می‌توانند به یک نام کلاس اشاره کنند.

در مثال زیر، هر دو <h2> و <p> به کلاس «شهر» اشاره می‌کنند و استایل مشابه دارند:

مثال

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

مثال

.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}

مثال

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

<h2>Different Elements Can Share Same Class</h2>

<p>Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling:</p>

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

</body>
</html>

Responsive demo.svg



استفاده از ویژگی class در جاوااسکریپت

نام کلاس همچنین می‌تواند توسط جاوااسکریپت، برای انجام کارهای خاص برای عناصر خاص استفاده شود.

جاوااسکریپت می‌تواند به عناصر با نام کلاس خاص با متد getElementsByClassName() دسترسی پیدا کند:

مثال

هنگامی که کاربر برروی کلیدی کلیک کند، همه عناصر دارای کلاس “city” پنهان می‌شوند:

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

مثال

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

مثال

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

Responsive demo.svg

اگر کد مثال بالا را متوجه نمی‌شوید نگران نباشید.

در مورد جاوااسکریپت در بخش HTML JavaScript ما بیشتر خواهید آموخت یا می‌توانید آموزش JavaScript ما را مطالعه کنید.


خلاصهٔ بخش

ویژگی class در HTML یک یا چند نام کلاس را برای یک عنصر مشخص می‌کند
کلاس‌ها توسط CSS و JavaScript برای انتخاب و دسترسی به عناصر خاص استفاده می‌شوند
ویژگی class را می‌توان در هر عنصر HTML استفاده کرد
نام کلاس به حروف بزرگ و کوچک حساس است
عناصر مختلف HTML می‌توانند به یک نام کلاس اشاره کنند
جاوااسکریپت می‌تواند به عناصر با نام کلاس خاص با متد getElementsByClassName() دسترسی پیدا کند

منابع آموزشی