خصیصه class در HTML

طریقه استفاده از خصیصه کلاس در HTML

خصیصه class در HTML یک یا چند نام کلاس را برای یک عنصر HTML مشخص می کند. نام کلاس را می توان برای CSS و JavaScript استفاده کرد تا عملیات یا کار خاصی را برای عنصر دارای نام کلاس مشابه انجام دهد. یعنی ابتدا در سند HTML برای عناصر نام کلاس مشخص کرده و سپس با استفاده از CSS یا JavaScript برای آن کلاس سبک یا عملکردی تعریف کرد.

مثال کلاس در HTML

در مثال زیر با استفاده از CSS عناصر دارای نام کلاس "city" سبک بندی می شوند:

<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

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

نتیجه اجرای کد فوق به صورت زیر خواهد شد:

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

توجه: خصیصه class را می توان برای هر یک از عناصر HTML استفاده نمود.

طریقه استفاده از خصیصه class در جاوا اسکریپت

جاوا اسکریپت (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>

برای فراگیری متدهای جاوا اسکریپت می توانید راهنمای آموزش جاوا اسکریپت پلکسا را بخوانید.

استفاده از چند کلاس

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

مثال چند کلاس برای یک عنصر HTML

در مثال زیر عناصر دارای نام کلاس "city" و همچنین عناصر دارای نام کلاس "main" با استفاده از کد زیر استیل بندی می شوند:

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

در مثال بالا اولین عنصر h2 که به هر دوی کلاس های "city" و "main" تعلق دارد، قالب دهی یا استیل بندی می شود.

استفاده از یک کلاس برای تگ های مختلف در HTML

در HTML تگ های مختلف می توانند دارای نام کلاس یکسانی باشند و بدینوسیله به یک شکل استیل بندی شوند. مثلا در نمونه کد زیر تگ های <h2> و <p> دارای کلاس "city" می باشند.

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

اگر در اجرای این راهنما به مشکل برخورد کردید و سایر سئوالات و پیشنهادات خود را در بخش سئوالات عمومی انجمن پلکسا مطرح نمایید. گروه توسعه وب پلکسا به سئوالات شما پاسخ خواهند داد.

عضویت در خبرنامه پلکسا

در صورت تمایل ایمیل خود را وارد کنید و تازه های پلکسا را از طریق ایمیل دریافت کنید. خبرنامه الکسا هفته نامه بوده و حاوی جدیدترین مطالب و نشریات پلکسا است.

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

در صورتی که به دنبال جذب بازدید کننده یا ارتقای رنکینگ سایت خود هستید، پیشنهاد می کنیم پلکسا را یک پست یا مطلب مهمان کنید. همانطور که برای سایت خود مطلب می نویسید، مطلب خود را آماده و کد نویسی کرده و در پلکسا منتشر کنید. پلکسا هیچگونه دخل یا تصرفی در پست شما نخواهد داشت.