مقدار ویژگی داده html5 php. کلاس ها به عنوان یک شی: classList

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

روش برنامه 1 - دسترسی به عناصر در css

اگر می دانید انتخابگرهای ویژگی چیست، احتمالاً می توانید حدس بزنید که چگونه می توان از ویژگی های جدید استفاده کرد. با تعیین یک ویژگی داده منحصر به فرد برای یک برچسب، می توانید به طور مناسب در سبک ها به آن مراجعه کنید. بیایید به یک مثال نگاه کنیم:

این به ما امکان می داد بدون استفاده از کلاس های سبک به عنصر دسترسی داشته باشیم. با این حال، اگر به این روش فکر کنید، این مزیت خاصی ایجاد نمی کند؛ برای مراجعه به یک کلاس، باید تقریباً همان مراحل را انجام دهید. بنابراین، شما به سادگی امکانات بیشتری برای انتخابگرها دارید و نه بیشتر.

روش کاربرد 2 - ذخیره مقادیر و استفاده از آنها

در نگاه اول، مقادیر ویژگی های داده چیزی را تغییر نمی دهد و به هیچ وجه بر صفحه وب تأثیر نمی گذارد. پس اصلاً چرا به آنها نیاز است؟ در واقع، اگر تابع attr() در css را به خاطر داشته باشید، می توانید برای آنها کاربرد پیدا کنید.

بیایید یک وظیفه تعیین کنیم: ما باید متن توضیحی را برای عکس ها در صفحه نمایش دهیم، که یا بلافاصله پس از بارگذاری تصویر ظاهر می شود، یا زمانی که ماوس را روی آن قرار می دهیم، فرقی نمی کند از کدام طرف. اشاره استاندارد با استفاده از آن اجرا می شود ویژگی عنوان.

اما چنین اشاره ای ممکن است از بسیاری جهات شما را راضی نکند. اولا، به آرامی ظاهر می شود (که همیشه لازم نیست). ثانیاً بعد از مدتی از بین می رود. ثالثاً، بسته به مکان قرارگیری مکان نما، در مکان های مختلف ظاهر می شود. خوب، بیشترین یک مشکل بزرگ- ما به هیچ وجه نمی توانیم راهنمای ابزار خود را سبک سازی کنیم - همیشه متن سیاه روی پس زمینه سفید خواهد بود که خیلی جالب نیست.

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

img(نمایش: بلوک درون خطی؛ ) img:after( محتوا: attr(data-img)؛ )

ما چه کرده ایم؟ اکنون همه تصاویر یک عنصر شبه حاوی مقدار خواهند داشت ویژگی داده-img، اگر آن را داشته باشد تگ img. با این روش ساده توانستید متن توضیحی عکس را نمایش دهید.

در این مقاله من دستورالعملی در مورد نحوه ایجاد یک اشاره ارائه نمی کنم. فقط بگم که به صورت پیش فرض بعد از لود شدن صفحه نمایش داده میشه. اغلب لازم است در ابتدا پنهان شود و هنگام نگه داشتن ماوس روی تصویر نمایش داده شود. برای پیاده سازی این، باید از انتخابگر img:hover:after استفاده کنید.

خوب، چه ویژگی های html5 دیگری وجود دارد که فقط در این مشخصات ظاهر شده است؟ به عنوان مثال، اینها شامل کنترل‌ها می‌شود - یک ویژگی برای عناصر صوتی و تصویری جدید، که به شما امکان می‌دهد کنترل‌هایی را برای ضبط ویدیو یا صدا نمایش دهید.

برای یک ویدیو، با استفاده از پارامتر پوستر، می‌توانید مسیر تصویر را که به عنوان پس‌زمینه عمل می‌کند، قبل از شروع تماشای ویدیو مشخص کنید. به طور کلی، تعداد کمی از این ویژگی های کوچک ظاهر شده اند.

همچنین برای یک مجرد عنصر ورودیپارامترهای جدید زیادی وجود دارد. اکنون می توانید فیلدهای ورودی ایجاد کنید پست الکترونیک، تلفن، انتخاب تاریخ یا ساعت تقویم، قسمت انتخاب رنگ و غیره. خالی ویژگی مورد نیازهر فیلدی را اجباری می کند؛ اگر این کار انجام نشود، مرورگر به سادگی اجازه ارسال فرم را نمی دهد.

البته تنها عیب همه این نوآوری ها این است که در همه جا به درستی پشتیبانی نمی شوند. بنابراین در حالی که ویژگی‌های جدید در یک مرورگر عالی کار می‌کنند و کاربران می‌توانند از فیلدهای جدید استفاده کنند، ممکن است در مرورگر وب دیگری همه چیز متفاوت باشد. البته خود کاربران نیز تا حدودی در به روز نشدن نرم افزار مقصر هستند، اما باید نظارت داشته باشید که چه چیزی و چگونه پشتیبانی می شود. که در

در روزهای XHTML/HTML4، توسعه دهندگان تنها چند گزینه داشتند که می توانستند برای ذخیره داده های دلخواه مربوط به DOM استفاده کنند. شما می‌توانید ویژگی‌های خود را اختراع کنید، اما این خطرناک بود - کد شما معتبر نخواهد بود، مرورگرها ممکن است داده‌های شما را نادیده بگیرند و اگر نام با ویژگی‌های استاندارد HTML مطابقت داشته باشد، ممکن است مشکلاتی ایجاد کند.

بنابراین، بیشتر توسعه‌دهندگان به صفات کلاس یا rel پایبند بودند، زیرا آنها تنها راه معقول برای ذخیره‌سازی بودند خطوط اضافی. برای مثال، فرض کنید در حال ایجاد یک ویجت برای نمایش پیام‌هایی مانند جدول زمانی پیام توییتر هستیم. در حالت ایده‌آل، جاوا اسکریپت باید بدون نیاز به بازنویسی کد قابل پیکربندی باشد، بنابراین شناسه کاربر را در ویژگی کلاس، مانند زیر تعریف می‌کنیم:

ما کد جاوا اسکریپتعنصر با شناسه را جستجو می کند فهرست پیام. با استفاده از اسکریپت کلاس هایی را که با آن شروع می شود جستجو می کنیم کاربر_، و "bob" در مورد ما شناسه کاربر خواهد بود و ما تمام پست های آن کاربر را نمایش خواهیم داد.

فرض کنید ما نیز می خواهیم بپرسیم بیشترین مقدارپیام‌ها و رد شدن از پیام‌های قدیمی‌تر از شش ماه (180 روز):

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

ویژگی های داده HTML5

خوشبختانه، HTML5 قابلیت استفاده از ویژگی های سفارشی را معرفی کرد. می توانید از هر نامی در آن استفاده کنید حروف کوچکبا پیشوند داده ها-، مثلا:

ویژگی های داده سفارشی:

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

مثال 1 پردازش جاوا اسکریپت: getAttribute و setAttribute

همه مرورگرها به شما امکان می دهند با استفاده از متدهای getAttribute و setAttribute ویژگی های داده را دریافت و تغییر دهید:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);

این کار می کند، اما فقط باید برای حفظ سازگاری با مرورگرهای قدیمی استفاده شود.

مثال شماره 2 پردازش در جاوا اسکریپت: متد data() کتابخانه jQuery

شروع با نسخه های جی کوئری 1.4.3 روش داده() ویژگی های داده HTML5 را پردازش می کند. نیازی نیست که پیشوند را به صراحت مشخص کنید داده ها-، بنابراین کدی مانند این کار می کند:

Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);

با این حال، توجه داشته باشید که jQuery سعی می کند مقادیر چنین ویژگی هایی را به انواع مناسب (بولی، اعداد، اشیاء، آرایه ها یا تهی) تبدیل کند و DOM را تحت تأثیر قرار می دهد. بر خلاف setAttribute، روش داده ها()به طور فیزیکی جایگزین ویژگی نخواهد شد data-list-size- اگر مقدار آن را خارج از jQuery بررسی کنید - همچنان برابر با 5 باقی می ماند.

مثال شماره 3 پردازش جاوا اسکریپت: API برای کار با مجموعه داده ها

در نهایت، ما یک API برای کار با مجموعه داده های HTML5 داریم که یک شی DOMStringMap را برمی گرداند. لازم به یادآوری است که ویژگی های داده بدون پیشوند به یک شی نگاشت می شوند داده ها-، خط تیره ها از نام ها حذف می شوند و خود نام ها به camelCase تبدیل می شوند، به عنوان مثال:

کد جدید ما:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

این API توسط همه پشتیبانی می شود مرورگرهای مدرن، اما نه IE10 و پایین تر. راه‌حلی برای این مرورگرها وجود دارد، اما اگر برای مرورگرهای قدیمی‌تر می‌نویسید، احتمالاً استفاده از jQuery عملی‌تر است.

به ما اجازه می دهد تا اطلاعات اضافی را در عناصر HTML استاندارد و معنایی بدون هک های دیگر مانند ویژگی های غیر استاندارد، ویژگی های اضافی در DOM یا Node.setUserData() ذخیره کنیم.

نحو HTML

نحو ساده است. هر صفت بر روی هر عنصری که نام ویژگی آن با داده شروع می شود یک ویژگی داده است. بگو مقاله ای داری و شما می خواهیدبرای ذخیره برخی اطلاعات اضافی که هیچ گونه نمایش بصری ندارند. فقط از ویژگی های داده برای آن استفاده کنید:

دسترسی به جاوا اسکریپت

برای به دست آوردن یک ویژگی داده از طریق شی مجموعه داده، ویژگی را با قسمتی از نام ویژگی پس از data- دریافت کنید (توجه داشته باشید که خط تیره ها به camelCase تبدیل می شوند).

Const article = document.querySelector("#electric-cars"); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "ماشین‌ها"

هر ویژگی یک رشته است و قابل خواندن و نوشتن است. در تنظیمات مورد بالا article.dataset.columns = 5 این ویژگی را به "5" تغییر می دهد.

دسترسی به CSS

توجه داشته باشید که از آنجایی که ویژگی‌های داده، ویژگی‌های ساده HTML هستند، حتی می‌توانید از CSS به آنها دسترسی داشته باشید. به عنوان مثال برای نمایش داده های والد در مقاله می توانید از محتوای تولید شده در CSS با تابع ()attr استفاده کنید:

مقاله::قبل از ( محتوا: attr(data-parent); )

همچنین می‌توان ویژگی‌های داده را ذخیره کرد تا حاوی اطلاعاتی باشد که دائماً در حال تغییر هستند، مانند امتیازات در یک بازی. استفاده از انتخابگرهای CSS و دسترسی جاوا اسکریپت در اینجا به شما این امکان را می دهد که بدون نیاز به نوشتن روال نمایش خود، جلوه های بسیار خوبی ایجاد کنید. دیدن این صفحه نمایشبرای مثال با استفاده از محتوای تولید شده و انتقال CSS (مثال JSBin).

مقادیر داده ها رشته ها هستند. مقادیر اعداد باید در انتخابگر ذکر شوند تا یک ظاهر طراحی شود.

مسائل

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

موضوعات اصلی که باید در نظر گرفته شوند عبارتند از اینترنت اکسپلوررپشتیبانی و عملکرد Internet Explorer 11+ از استاندارد پشتیبانی می کند، اما همه نسخه های قبلی از مجموعه داده پشتیبانی نمی کنند. برای پشتیبانی از IE 10 و زیر، باید به جای آن به ویژگی های داده با getAttribute() دسترسی داشته باشید. همچنین، عملکرد خواندن ویژگی های داده در مقایسه با ذخیره این داده ها در یک شی JS معمولی ضعیف است.

HTML5قابلیت ذخیره مستقیم داده ها را اضافه کرد htmlکد با این حال، این داده ها برای کاربر قابل مشاهده نخواهد بود. ویژگی های داده-*به ما اجازه می دهد تا داده های اضافی را در هر کدام ذخیره کنیم htmlعناصر بدون مسدود کردن نام کلاس ها.

نحو HTML

نحو بسیار ساده است. به عنوان مثال، شما یک مقاله دارید و می خواهید مقداری از آن را ذخیره کنید اطلاعات تکمیلی، که نباید نشان داده شود. استفاده كردن ویژگی های data-*می توانید این کار را انجام دهید:

از مثال مشخص است که همه چیز ویژگی های data-*به صورت زیر نوشته می شوند:

"data-" + "name-parameter"

دسترسی از جاوا اسکریپت

خواندن داده ها از ویژگی های data-*همچنین بسیار ساده ما میتوانیم استفاده کنیم getAttribute()برای خواندن، اما طبق استاندارد روش ساده تری تعریف شده است، یعنی از طریق ویژگی مجموعه داده:

Var article = document.querySelector("#electriccars"); var data = article.dataset; // data.columns -> "3" // data.indexnumber -> "12314" // data.parent -> "cars"

مقدار هر ویژگی یک رشته است، ما می توانیم این مقدار را دریافت و تغییر دهیم. اگر بنویسیم article.dataset.columns = 5، سپس ملک ستون های دادهبه 5 تغییر خواهد کرد.

دسترسی به CSS

به ویژگی های data-*ما می توانیم به همین راحتی از طریق دسترسی داشته باشیم CSS. مثلا برای گرفتن داده والدویژگی مقاله، می توانید از عناصر شبه در آن استفاده کنید CSSبا attr():

مقاله::قبل از ( محتوا: attr(data-parent); )

شما همچنین می توانید از انتخابگرها در CSSبرای تغییر سبک بسته به مقدار داده ها-*:

مقاله (عرض: 400 پیکسل؛ ) مقاله (عرض: 600 پیکسل؛ )

با دنبال کردن لینک می توانید ببینید که چگونه همه کار می کند.

ویژگی های دادهبنابراین ممکن است حاوی اطلاعات در حال تغییر، به عنوان مثال، امتیازات در یک بازی باشد. استفاده كردن CSSانتخابگرها و دسترسی از جاوا اسکریپتمی توانیم ایجاد کنیم جلوه های جالببدون نوشتن کد اضافیبرای نمایش دادن بیایید نگاه بیندازیم ویدئو. پیوند به کد.

چالش ها و مسائل

داده ها را در آن ذخیره نکنید ویژگی های data-*، که باید نشان داده شود زیرا فناوری های کمکی نمی توانند به آنها دسترسی پیدا کنند. بعلاوه ربات های جستجوگرنمایه نشده است ویژگی های data-*.

غم انگیز است اما I.E.پشتیبانی نمی کند مجموعه داده. برای خواندن ویژگی ها باید از آن استفاده کنید getAttribute()، برای تغییر مقدار setAttribute().

سرعت خواندن ویژگی های دادهدر مقایسه با ذخیره این داده ها بسیار کمتر است JS. استفاده مجموعه دادهحتی کندتر از getAttribute().