تگ های HTML – تگ template
سلام
با معرفی تگ <template> از سری تگ های HTML در خدمتتون هستیم.
- نمونه کد تگ <template>
|
۱ ۲ ۳ ۴ |
<template> <h2>Flower</h2> <img src="img_white_flower.jpg"> </template> |
- معرفی و کاربرد
محتوایی که درون تگ <template> قرار میگیرد از دید کاربر پنهان است و در پس زمینه فعال است.
زمانی هست که یک محتوا درون کدها قرار میدهیم که نمیخواهیم هنگام اجرا توسط مرورگر نمایش داده شود، این محتوا را میتوانید درون این تگ قرار دهید.
برای اینکه محتوای درون تگ <template> را به نمایش در آورید نیاز به کد جاوا اسکریپت داریم.
مثالی از تگ <template> همراه با جاوا اسکریپت:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ |
<!DOCTYPE html> <html> <body> <h1>The template Tag</h1> <p>Click the button to get the content from a template, and display it in the web page.</p> <button onclick="showContent()">Show content</button> <template> <h2>Flower</h2> <img src="img_white_flower.jpg" width="۲۱۴" height="۲۰۴"> </template> <script> function showContent() { var temp = document.getElementsByTagName("template")[۰]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script> </body> </html> |
کد بالا را اجرا کنید و دکمه Show Content را چندین بار اجرا کنید، تا متوجه کاربرد این تگ بشید.
- پشتیبانی در مرورگرها
| عنصر | |||||
|---|---|---|---|---|---|
| template | ۲۶.۰ | ۱۳.۰ | ۲۲.۰ | ۸.۰ | ۱۵.۰ |
- آزمایش مرورگر
با استفاده از قطعه کد زیر میتوانید ببینید که آیا این تگ در مرورگر، پشتیبانی میشود یا خیر
|
۱ ۲ ۳ ۴ ۵ |
if (document.createElement("template").content) { /*کدهایی که اگه مرورگر، شناسایی شود اجرا شود*/ } else { /*مرورگر پشتیبانی نمیشود*/ } |
معرفی این تگ نیز به پایان رسید.
موفق باشید.
نظر ( 1 )
سلام
از طریق بخش پرسش و پاسخ سایت؛ میتونید سوالاتتون رو بپرسید، تمامی عزیزان حاضر در سایت میتونند به شما کمک کنند …
موفق باشید.