٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش ویژگی کلاس HTML

از classویژگی HTML برای تعیین کلاس برای یک عنصر HTML استفاده می شود. چندین عنصر HTML می توانند در یک کلاس مشترک باشند. با استفاده از ویژگی کلاس از این classویژگی اغلب برای اشاره به نام کلاس در یک صفحه سبک استفاده می شود. همچنین…

محمد یوسفی

28 ژوئن 2021

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

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


با استفاده از ویژگی کلاس

از این classویژگی اغلب برای اشاره به نام کلاس در یک صفحه سبک استفاده می شود. همچنین می تواند توسط JavaScript برای دسترسی و دستکاری عناصر با نام کلاس خاص مورد استفاده قرار گیرد.

در مثال زیر سه <div>عنصر با یک classصفت با مقدار “شهر” داریم. سبک هر سه <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>

در مثال زیر دو <span>عنصر با یک classویژگی با مقدار “توجه” داریم. <span> با توجه به .note تعریف سبک در بخش 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>

نکته:class ویژگی را می توان در استفاده هر عنصر HTML.

توجه: نام کلاس به حروف کوچک و بزرگ حساس است!

نکته: در آموزش CSS می توانید اطلاعات بیشتری درباره 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>

کلاسهای متعدد

عناصر 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>

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

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

در مثال زیر، هر دو <h2>و <p> کلاس (class) “شهرستان” و به سبک همان به اشتراک بگذارید:

مثال

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

استفاده از ویژگی کلاس در JavaScript

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

JavaScript می تواند به عناصر دارای یک کلاس خاص با استفاده از getElementsByClassName()روش دسترسی پیدا کند:

مثال

بر روی یک دکمه کلیک کنید تا تمام عناصر با نام کلاس “city” مخفی شود:

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

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

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها