این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش صفت عمومی hidden در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت عمومی hidden در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت hidden صفتی است که ما با استفاده از آن میتوانیم یک تگ را مخفی نماییم، بطوریکه این تگ از دید کاربر بطور کامل پنهان باشد. مرورگرها هم نیز تگ که از این صفت استفاده کرده باشد را نمایش نخواهند داد.
یعنی عملا در ظاهر و از دید کاربر مخفی میشود ولی خب در سورس صفحه وجود داره، و اگه کمی شیطون باشید میشه خیلی راحت اون محتوای مخفی رو نمایش داد.
معمولا با استفاده از این صفت ما میتوانیم یک عنصر را از دید کاربر در حالت معمولی پنهان کنیم و سپس ما میتوانیم با استفاده از دستورات جاوااسکریپت آن عنصر را برای کاربر به نمایش دربیاوریم.
برای مثال الان یک باکس کمی پایین تر وجود دارد ولی از دید شما پنهان می باشد برای اینکه اون باکس رو مشاهده کنید لطفا بروی دکمه زیر کلیک نمایید.
Free-Learn
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
|
1 2 3 4 5 6 7 |
<body> <p>این پاراگراف در حال نمایش می باشد</p> <p hidden>ولی این یکی مخفی می باشد</p> <p>این پاراگراف در حال نمایش می باشد</p> </body> |
مثال شماره ۲ : نمایش / مخفی کردن محتوا با استفاده از جاوا اسکریپت
|
1 2 3 4 5 6 |
<button onclick="changeVisibility();">نمایش بده</button> <button onclick="hide();">مخفی کن</button> <div class="imgbox" id="imgbox2" style="visibility:hidden;"> <p>سایت آموزشی فری لرن</p> </div> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت hidden در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
روش استفاده
روش استفاده از این صفت در عناصر HTML بصورت زیر می باشد.
|
1 |
<element hidden> |
Free-Learn
نکات و توضیحات
- اگه متن یا تصویر رو با استفاده از این صفت مخفی کنیم، این مخفی شدن فقط از دید ظاهری کاربر می باشد، وگرنه به راحتی میشه از سورس صفحه اون چیزی که مخفی شده رو بدست آورد.
- این صفت از صفت های بدون مقدار می باشد.
