ویژگی class و id در HTML

قبلی بعدی

نام گذاری المان ها در HTML

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

<tag class="نام کلاس"></tag>
<tag id="نام id"></tag>

نکته: با کمک کلاس و id می توانیم المان را در CSS و JS، صدا بزنیم.

ویژگی class در HTML

برای نام گذاری المان ها در HTML می توان از ویژگی class استفاده کرد. در نمونه کد زیر به تگ span کلاس bold داده ایم.

<p>این متن <span class="bold">مهم</span> است.</p>

از یک کلاس مشابه می توان در چند المان استفاده کرد.

از کلاس می توان برای فراخوانی المان ها در CSS (داخلی و خارجی) و JS (داخلی و خارجی) استفاده کرد.

نکته: پیش نیاز این آموزش، آموزش کجا کد بزنیم CSS است.

برای فراخوانی کلاس در CSS از علامت نقطه (.) استفاده می کنیم. برای درک بهتر به نمونه کد زیر توجه کنید.

<head>
    <style>
        /* با استفاده از نقطه می توان کلاس را فراخوانی کرد */
        .bold {
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <p>این متن <span class="bold">مهم</span> است.</p>
</body>

همانطور که در نمونه کد بالا دیدید، با استفاده از .bold (نقطه bold) کلاس bold را فراخوانی کردیم.

نکته: نام کلاس حداقل دارای یک حرف است، با عدد شروع نمی‌شود.

نکته: یک المان می تواند چندین کلاس داشته باشد. هر کلاس با فاصله از کلاس های دیگر جدا می شود.

ویژگی id در HTML

برای نام گذاری المان ها در HTML می توان از ویژگی id استفاده کرد. در نمونه کد زیر به تگ span آیدی bold داده ایم.

<p>این متن <span id="bold">مهم</span> است.</p>

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

از id می توان برای فراخوانی المان ها در CSS (داخلی و خارجی) و JS (داخلی و خارجی) استفاده کرد.

نکته: پیش نیاز این آموزش، آموزش کجا کد بزنیم CSS است.

برای فراخوانی id در CSS از علامت هش (#) استفاده می کنیم. برای درک بهتر به نمونه کد زیر توجه کنید.

<head>
    <style>
        /* با استفاده از هش می توان آیدی را فراخوانی کرد */
        #bold {
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <p>این متن <span id="bold">مهم</span> است.</p>
</body>

همانطور که در نمونه کد بالا دیدید، با استفاده از #bold (هش bold) آیدی bold را فراخوانی کردیم.

نکته: نام آیدی حداقل دارای یک حرف است، با عدد شروع نمی‌شود و فضای خالی بین حروف مجاز نیست.

تفاوت class و id در HTML

تفاوت id و class:

id یکتا است و چند المان نمی توانند از یک id مشخص استفاده کنند.
اما class یکتا نیست و حتی چندین المان می توانند از یک class استفاده کنند.
علامت class (.) است.
علامت id (#) است.

استفاده از کلاس تکراری در HTML

همانطور که قبل تر گفته شد id یکتا است. و نمی توانیم به دو المان id یکسان دهیم.

اما برخلاف id، می توان از یک class مشابه در چندین المان استفاده کرد.

نکته: ویژگی کلاس تکراری باعث می شود شما با یک بار استایل نویسی کنید ولی آن استایل را به چندین المان اعمال کنید.

<div class="box">
    <h2>HTML</h2>
    <p>زبان HTML برای ساختار سایت استفاده می شود.</p>
</div>
<div class="box">
    <h2>CSS</h2>
    <p>زبان CSS برای استایل دهی استفاده می شود.</p>
</div>
<div class="box">
    <h2>JS</h2>
    <p>زبان JS در سمت کاربر اجرا می شود.</p>
</div>

نکته: یک المان می تواند چندین کلاس داشته باشد. هر کلاس با فاصله از کلاس های دیگر جدا می شود.

<div class="box">
    <h2>HTML</h2>
    <p>زبان HTML برای ساختار سایت استفاده می شود.</p>
</div>
<div class="box red-box"> <!-- این المان دو کلاس دارد -->
    <h2>CSS</h2>
    <p>زبان CSS برای استایل دهی استفاده می شود.</p>
</div>
<div class="box">
    <h2>JS</h2>
    <p>زبان JS در سمت کاربر اجرا می شود.</p>
</div>

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

از نام class و id می‌توان برای انتخاب المان ها در JS نیز استفاده کرد.

با استفاده از متد ()getElementsByClassName می‌توان به المان‌هایی که از نام کلاس استفاده می‌کنند دسترسی پیدا کرد.

<script>
    function red_box() {
        let boxes = document.getElementsByClassName("box");
        for (let i=0; i < boxes.length; i++) {
            boxes[i].style.backgroundColor = "red";
        }
    }
</script>

با استفاده از متد ()getElementById می‌توان به المانی که از نام آیدی استفاده می‌کنند دسترسی پیدا کرد.

<script>
    function yellow_box() {
        document.getElementById("red-box").style.backgroundColor = "yellow";
    }
</script>

نکته: اگر کد مثال بالا را درک نمی‌کنید، نگران نباشید. در آموزش JavaScript با مفاهیم بالا آشنا می شوید.

پیوند داخل صفحه ای (bookmark) با کمک id

با استفاده از id و تگ a می توانید کاربر را درون یک صفحه جا به جا کنید.

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

برای درک بهتر به نمونه کد زیر توجه کنید.

ابتدا، یک المان با ویژگی id بسازید.

<h2 id="p2">قسمت دوم</h2>
<h2 id="p7">قسمت هفتم</h2>

سپس، با علامت هش بعلاوه id، یک پیوند ایجاد کنید.

<a href="#p2">رفتن به قسمت دوم</a>
<a href="#p7">رفتن به قسمت هفتم</a>

قبلی بعدی

توسعه دهندگان

احسان اسلامی