استخدام الكلاسات class Attribute html

سمة (Attribute) class

تُستخدم سمة class لتحديد عنصر من عناصر HTML.

استخدامات الكلاس Using The class Attribute

يمكن لعناصر HTML المتعددة أن تشترك في نفس class .

غالبًا ما تُستخدم سمة class للإشارة إلى اسم class في ورقة css. يمكن أيضًا استخدامه بواسطة JavaScript للوصول إلى العناصر ومعالجتها باستخدام اسم class معين.
في المثال التالي لدينا ثلاثة عناصر <div> مع سمة class بقيمة "city". سيتم تنسيق جميع عناصر <div> الثلاثة بالتساوي
مثال

<!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>الجزائر</h2>
<p>الجزائر هي عاصمة الجزائر.</p>
</div>
<div class="city">
<h2>تونس</h2>
<p>تونس هي عاصمة تونس.</p>
</div>
<div class="city">
<h2>ليبيا</h2>
<p>طرابلس هي عاصمة ليبيا.</p>
</div><div class="city">
<h2>المغرب</h2>
<p>الرباط هي عاصمة المغرب.</p>
</div>
</body>
</html>

في المثال التالي لدينا عنصرا <span> مع سمة class بقيمة "note". سيتم تصميم كلا العنصرين <span> بشكل متساوٍ وفقًا لتعريف نمط الملاحظة. في قسم 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.

بناء جملة الكلاس The Syntax For Class
لإنشاء كلاس ؛ اكتب نقطة (.) ، متبوعًا باسم الكلاس. بعد ذلك ، حدد خصائص CSS داخل الأقواس المتعرجة {}:
مثال
أنشئ كلاس باسم "city":

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

<h2 class="city">الجزائر</h2>
<p>الجزائر عاصمة الجزائر.</p>

<h2 class="city">ليبيا</h2>
<p>طرابلس عاصمة ليبيا.</p>

<h2 class="city">المغرب</h2>
<p>المغرب عاصمتها الرباط.</p>

</body>
</html>

كلاسات متعددة لنفس العنصر Multiple Classes
يمكن أن تنتمي عناصر HTML إلى أكثر من كلاس واحد .
لتحديد كلاسات متعددة ، افصل بين أسماء الكلاسات بمسافة ، على سبيل المثال <div class = "city main">. سيتم تنسيق العنصر وفقًا لجميع الكلاسات المحددة.
في المثال التالي ، ينتمي العنصر <h2> الأول إلى كل من كلاس city وأيضًا إلى كلاس main ، وسيحصل على تنسيقات CSS من كلا الكلاسين:
مثال

<!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>هنا ، تنتمي جميع عناصر h2 الثلاثة إلى كلاس "city". بالإضافة إلى ذلك ، تنتمي لندن أيضًا إلى الكلاس "main" ، الذي يقوم بمحاذاة النص في الوسط.</p>

<h2 class="city main">الجزائر</h2>
<h2 class="city">تونس</h2>
<h2 class="city">المغرب</h2>

</body>
</html>

يمكن أن تشترك العناصر المختلفة في نفس الكلاس
يمكن أن تشير عناصر HTML المختلفة إلى نفس اسم الكلاس.
في المثال التالي ، يشير كل من <h2> و <p> إلى كلاس "city" وسيشتركان في نفس التنسيق:
مثال

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

<h2> يمكن أن تشترك العناصر المختلفة في نفس الفئة </h2>
 
<p> حتى إذا لم يكن للعنصرين نفس اسم العلامة ، فيمكن أن يشير كلاهما إلى نفس الفئة والحصول على نفس نمط CSS: </p>
 
<h2 class="city"> باريس </h2>
<p class="city"> باريس هي عاصمة فرنسا. </p>

</body>
</html>

استخدام سمة الكلاس في JavaScript
يمكن أيضًا استخدام اسم الكلاس بواسطة JavaScript لأداء مهام معينة لعناصر محددة.
يمكن لـ JavaScript الوصول إلى عناصر باسم كلاس محدد باستخدام دالة getElementsByClassName ():
مثال
انقر فوق الزر لإخفاء جميع العناصر التي تحمل اسم الكلاس "city":

<!DOCTYPE html>
<html>
<body>

<h2> استخدام سمة الفئة في JavaScript </h2>
<p> انقر فوق الزر لإخفاء جميع العناصر التي تحمل اسم الفئة "city": </p>
 
<button onclick="myFunction ()"> إخفاء العناصر </Button>
 
<h2 class="city"> لندن </h2>
<p> لندن هي عاصمة إنجلترا </p>
 
<h2 class="city"> باريس </h2>
<p> باريس هي عاصمة فرنسا. </p>
 
<h2 class="city"> طوكيو </h2>
<p> طوكيو هي عاصمة اليابان. </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>

لا تقلق إذا لم تفهم الكود في المثال أعلاه.
سوف تتعلم المزيد عن JavaScript في فصل HTML JavaScript الخاص بنا ، أو يمكنك دراسة برنامج JavaScript التعليمي.

ملخص الفصل

تحدد سمة الكلاس اسم كلاس واحدًا أو أكثر لعنصر
يتم استخدام الكلاس بواسطة CSS و JavaScript لتحديد عناصر محددة والوصول إليها
يمكن استخدام سمة class في أي عنصر HTML
اسم الكلاس حساس لحالة الأحرف
يمكن أن تشير عناصر HTML المختلفة إلى نفس اسم الكلاس
يمكن لـ JavaScript الوصول إلى عناصر باسم كلاس محدد باستخدام طريقة getElementsByClassName ()

الدرس السابق الدرس التالي