Где прописывать атрибут data template style true. Как использовать data-атрибуты HTML5
HTML5 добавил возможность хранить данные напрямую в html коде. При этом эти данные не будут видны пользователю. Data-* attributes позволяет нам хранить дополнительные данные в любых html элементах, не засоряя имена классов.
HTML ситаксисСинтаксис очень простой. Например, у вас есть статья и вы хотите хранить некоторую дополнительную информацию, которая не должна быть показана. Используя data-* attributes можно сделать так:
...
Из примера видно, что все data-* attributes записываются следующим образом:
«data-» + «name-parameter»
Доступ из JavaScriptЧтение данных из data-* attributes так же очень простое. Мы можем использовать getAttribute() для чтения, но по стандарту определен более простой способ, а именно через свойство dataset :
Var article = document.querySelector("#electriccars"); var data = article.dataset; // data.columns -> "3" // data.indexnumber -> "12314" // data.parent -> "cars"
Значением каждого свойства является строка, мы можем получать и изменять данное значение. Если мы напишем article.dataset.columns = 5 , то свойство data-columns изменится на 5.
CSS доступК data-* attributes мы можем так же просто получить доступ и через CSS . Например, чтобы получить data-parent атрибут статьи, вы можете использовать псевдоэлементы в CSS с attr() :
Article::before { content: attr(data-parent); }
Вы так же можете использовать селекторы в CSS , чтобы изменить стили в зависимости от значения data-* :
Article{ width: 400px; } article{ width: 600px; }
Посмотреть, как все это работать можно по ссылке .
Data attributes так может содержать изменяющуюся информацию, например, очки в игре. Используя CSS селекторы и доступ из JavaScript мы можем создавать классные эффекты без написания дополнительного кода для отображения. Смотрим видео . Ссылка на код .
ПроблемыНе храните данные в data-* attributes , которые должны быть показаны, так как вспомогательные технологии не могут получить к ним доступ. К тому же поисковые роботы не индексируют data-* attributes .
Печально, но IE не поддерживает dataset . Для чтения атрибутов необходимо использовать getAttribute() , для изменения значения setAttribute() .
Скорость чтения data-attributes намного ниже по сравнению с хранением этих данных в JS . Использование dataset работает даже медленнее, чем getAttribute() .
Allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData() .
HTML syntaxThe syntax is simple. Any attribute on any element whose attribute name starts with data- is a data attribute. Say you have an article and you want to store some extra information that doesn’t have any visual representation. Just use data attributes for that:
...
JavaScript accessTo get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase).
Const article = document.querySelector("#electric-cars"); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars"
Each property is a string and can be read and written. In the above case setting article.dataset.columns = 5 would change that attribute to "5" .
CSS accessNote that, as data attributes are plain HTML attributes, you can even access them from CSS . For example to show the parent data on the article you can use generated content in CSS with the attr() function:
Article::before { content: attr(data-parent); }
Data attributes can also be stored to contain information that is constantly changing, like scores in a game. Using the CSS selectors and JavaScript access here this allows you to build some nifty effects without having to write your own display routines. See this screencast for an example using generated content and CSS transitions (JSBin example).
Data values are strings. Number values must be quoted in the selector for the styling to take effect.
IssuesDo not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index data attributes" values.
The main issues to consider are Internet Explorer support and performance. Internet Explorer 11+ provides support for the standard, but all earlier versions do not support dataset . To support IE 10 and under you need to access data attributes with getAttribute() instead. Also, the performance of reading data-attributes compared to storing this data in a regular JS object is poor.
Влад Мержевич
В HTML 4 крайне не хватало возможности создавать свои собственные атрибуты для хранения значений. Зачем это надо? Вот несколько задач, где это может потребоваться.
- Создание всплывающих подсказок без применения скриптов.
- Определение стиля элемента на основе значения атрибута.
- Получение и изменение значений через скрипты.
В HTML5 появился новый универсальный атрибут, который можно добавлять к любому тегу. Правила написания атрибута простые:
- всегда начинаем с data-;
- используем только латинские буквы, дефис (-), двоеточие (:) и подчёркивание (_).
CSS и JavaScript немного по разному обращаются к таким атрибутам, так что разберём примеры для них отдельно.
CSSВ CSS есть атрибуты тегов, при наличии какого-либо атрибута или заданного значения мы задаём необходимый стиль.
Содержимое
Теперь можем в стилях обратиться к этому элементу как div и установить для него нужное оформление. В общем, это напоминает работу классов, поэтому не является какой-то уникальной или необходимой фичей. Так что полезнее задавать значения.
Содержимое
В CSS после этого можем задавать разный стиль при различных значениях нашего атрибута data-columns.
Div { width: 480px; } div { width: 720px; }
Опять же, это в какой-то мере является заменой классам, ничего ведь не мешает сделать классы с именами column-2, column-3 и добавлять их при необходимости.
Более изящной областью применения выступает включение функции attr() . Она получает значение заданного атрибута и вставляет его в стиль. Удобно это использовать для создания всплывающих подсказок. Текст пишем прямо внутри элемента, а вывод и оформление подсказки реализуем с помощью CSS.
Всплывающая подсказка meter { position: relative; } meter:hover::after { content: attr(data-description); background: #ffe; padding: 5px; border: 1px solid #666; position: absolute; top: 20px; }
Температура воды
В данном примере к элементу добавляется атрибут data-description содержащий необходимый текст для вывода. Само отображение происходит с помощью псевдоэлемента ::after и свойства content , значением которого как раз и выступает функция attr() .
JavaScriptЕсли в CSS мы обращаемся к имени атрибута напрямую, указывая его полностью, то в JavaScript это делается через метод dataset. Само имя атрибута преобразовывается в переменную по следующим правилам:
- data- отбрасывается;
- любой дефис идущий перед буквой отбрасывается, а буква за ним становится заглавной.
На практике это выглядит так.
data-description превращается в description.
data-full-description превращается fullDescription.
data-description-of-tag превращается descriptionOfTag.
Традиционный способ получить доступ к элементу и его атрибутам - задать идентификатор и обратиться к элементу через getElementById , как показано в примере ниже.
dataset Пользователь var el = document.getElementById("user"); id = el.dataset.id; // Получаем значение атрибута data-id user = el.dataset.user; dob = el.dataset.dateOfBirth; // Получаем значение атрибута data-date-of-birth el.dataset.ban = "Нет"; // Назначаем новый атрибут data-ban и его значение console.log(user); // Выводим в консоль значение переменной user console.log(dob); // Выводим в консоль значение переменной dob
Вначале добавляем к элементу идентификатор с уникальным значением. Затем получаем доступ к элементу через getElementById . Теперь мы можем обращаться к любым атрибутам data через метод dataset , причём не только получать, но и устанавливать значения. Храниться они будут до перезагрузки страницы или до установки нового значения.
Have you ever found yourself using element class names or rel attributes to store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler? If you have, then I have some exciting news for you! If you haven"t and you"re thinking, Wow, that"s a great idea! I implore you to rid your mind of that thought immediately and continue reading.
Thanks to HTML 5, we now have the ability to embed custom data attributes on all HTML elements. These new custom data attributes consist of two parts:
Attribute Name The data attribute name must be at least one character long and must be prefixed with " data- ". It should not contain any uppercase letters. Attribute Value The attribute value can be any string.
Using this syntax, we can add application data to our markup as shown below:
- Carrots
- Celery
- Radishes
We can now use this stored data in our site’s JavaScript to create a richer, more engaging user experience. Imagine that when a user clicks on a vegetable a new layer opens up in the browser displaying the additional seed spacing and sowing instructions. Thanks to the data- attributes we’ve added to our
Prefixing the custom attributes with data- ensures that they will be completely ignored by the user agent. As far as the browser and indeed the website’s end user are concerned, this data does not exist.
The spec says (emphasis ours):
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
These attributes are not intended for use by software that is independent of the site that uses the attributes.
Every HTML element may have any number of custom data attributes specified, with any value.
W3C Specification How can I use data attributes?As custom data attributes are valid HTML 5, they can be used in any browser that supports HTML 5 doctypes. Thankfully, this is pretty much all of them. In addition to aiding backwards compatibility, this also ensures that custom data attributes will remain a scalable, cross-platform solution well into the future.
Now that we have a broad understanding of what data attributes are, let"s take a look at how they can be used:
- To store the initial height or opacity of an element which might be required in later JavaScript animation calculations
- To store parameters for a Flash movie that’s loaded via JavaScript
- To store custom web analytics tagging data as demonstrated by Jason Karns
- To store data about the health, ammo, or lives of an element in a JavaScript game
- To power accessible JavaScript subtitles as demonstrated by Bruce Lawson
Although flexible, data attributes aren’t an appropriate solution for all problems.
- Data attributes should not be used if there is a existing attribute or element which is more appropriate for storing your data. For example, date/time data should probably be presented semantically in a time element instead rather than stored in custom data attributes.
- Custom data attributes are not intended to compete with microformats. It is clearly stated in the spec that the data is not intended to be publicly usable. External software should not interact with it. Marking up contact details or event details using custom data attributes would be wrong, unless of course it is only intended to be used by your own internal scripts.
- The presence/absence of a particular data attribute should not be used as a CSS hook for any styling. Doing so would suggest that the data you are storing is of immediate importance to the user and should be marked up in a more semantic and accessible manner.
Now that we understand what custom data- attributes are and when we can use them, we should probably take a look at how we can interact with them using JavaScript.
If we wanted to retrieve or update these attributes using existing, native JavaScript, then we can do so using the getAttribute and setAttribute methods as shown below:
// "Getting" data-attributes using getAttribute var plant = document.getElementById("strawberry-plant"); var fruitCount = plant.getAttribute("data-fruit"); // fruitCount = "12" // "Setting" data-attributes using setAttribute plant.setAttribute("data-fruit","7"); // Pesky birds
This method will work in all modern browsers, but it is not how data- attributes are intended to be used. The second (new and improved) way to achieve the same thing is by accessing an element’s dataset property. This dataset property - part of the new HTML 5 JavaScript API s - will return a DOMStringMap object of all the selected element"s data- attributes. When using this approach, rather than using the full attribute name, you can ditch the data- prefix and refer to the custom data directly using the name you have assigned to it. Data attribute names which contain hyphens will be stripped of their hyphens and converted to CamelCase .
// "Getting" data-attributes using dataset var plant = document.getElementById("sunflower"); var leaves = plant.dataset.leaves; // leaves = 47; // "Setting" data-attributes using dataset var tallness = plant.dataset.plantHeight; // "plant-height" -> "plantHeight" plant.dataset.plantHeight = "3.6m"; // Cracking fertiliser
If, at some point in your script, a specific data- attribute becomes redundant and is no longer needed, it is also possible to completely remove that attribute from the DOM element by setting it to a value of null .
Plant.dataset.leaves = null; // Caterpillars attack!
Unfortunately, the new dataset property has not yet been implemented in any browser, so in the meantime it’s best to use getAttribute and setAttribute as demonstrated earlier.
While developing your application, you may find it useful to be able to select elements based on the presence of - or indeed the specific values of - their custom data- attributes. This can be achieved quickly and easily using querySelectorAll as shown below:
// Select all elements with a "data-flowering" attribute document.querySelectorAll(""); // Select all elements with red leaves document.querySelectorAll("");
A word of warningAs data attributes become more widely used, the potential for clashes in naming conventions becomes much greater. If you use an unimaginative attribute name such as data-height , then it is likely you will eventually come across a library or plugin that uses the same attribute name. Multiple scripts getting and setting a common data- attribute will probably cause chaos. In order to avoid this, I encourage people to choose a standard string (perhaps the site/plugin name) to prefix all their data- attributes - e.g. data-html5doctor-height or data-my-plugin-height .
SummaryCustom data- attributes are a great way to simplify the storage of application data in your web pages. Although you can’t utilise the new JavaScript API s just yet, you can enjoy great success using getAttribute and setAttribute safe in the knowledge that they will work in all major browsers.
HomeworkIf you’re super keen to have a play with the new dataset property but disappointed that it hasn’t been implemented, fear not!, for there is a light at the end of the tunnel. You might be interested in looking at Dr Remy’s experimental code , which partially enables the dataset functionality in some browsers by editing the Element.prototype .
The code supports the retrieval of data- attributes in the latest versions of Firefox, Safari, Opera, and Chrome, but sadly will not work in any version of IE (since IE does not expose the Element object). This code also partially supports the setting of data attributes, but it will only store the new attribute values within the JavaScript and will not update the DOM element as a full, native implementation of the dataset property would. Although this code is mainly a proof of concept, it may be useful for mobile application or intranet development in closed environments where cross-browser (IE) compatibility is not an issue.
- Category
I firmly do not see why it is inappropriate to use custom data attributes for external applications provided that these external applications are not a requirement for viewing the page.
I don’t understand why this article quotes the part of the spec saying data-* attributes are site-specific, and then gives a warning promoting namespacing. If you follow the spec, you’re creating all of the attribute names, so there’s zero reason for namespacing. That’s exactly why that’s in the spec.
@Scott – the namespacing isn’t to create “site-specific” data attributes, but in-application namespacing.
For example (and IIRC the spec mentions this) a widget’s controls (like a tree view) may have data attributes, but the data attributes may have been created using a specific library, such as jQuery or Dojo – so to avoid data attribute collisions the application module may want to namespace it.
I can’t see where Chris referred to the data attribute being site-specific (but it’s late and I may have missed it).
There’s a lot of cases where you won’t want or need to use namespacing, but there are some cases where it makes sense. But since this just builds on existing content attributes rules – you’re free to decide how you use them.
I’m using the data-* with getAttribute and setAttribute since I saw a post about that 2 years ago by Jon Resig, so I can confirm that this way of using it works for all browsers/platforms, starting with IE6.
I just hope that any browser implementing data-* natively won’t break the getAttribute method (it shouldnt but we never know)
From a performance point of view, accessing the DOM via getAttribute() is obviously slower than accessing to a JS variable, event stored in an array, so the use case you give of a JS game using it to store values will probably never happen: developers will use it to transmit info from server to client, but once the DOM has been harvested, it’s best to keep all the values in JS for quicker access
@jpvincent – Yeah, I totally agree with you.
I guess the initial health and ammo data could be stored in a database and using a data-attribute would be a valid mechanism to transfer this information to the game’s javascript. But once this initialisation task is complete there is very little point in continuing to make costly DOM updates with the latest health/ammo stats.
Thanks for your comment.
Your article mentions that you shouldn’t use data-* for CSS hooks. What if the data-* attribute was used in the JS but you also wanted to apply styles to it. Wouldn’t it make sense to target the attribute rather than add a secondary class.
Take this form for example:
Title *is required
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
data-field_type=”text” could be used for both validation and styling layout.
Pretty cool feature, although no browsers support it yet. This little bit of code works to add support for the dataset property to any browser that supports __defineGetter__. I wrote it before I realized you linked some code that does pretty much the same thing. My code, on the other hand, has support for actually udpating the attribute values, but it does not support adding new attributes.
Element.prototype.__defineGetter__(‘dataset’, function(){
var dataset = {};
for (var i=0, l=this.attributes.length; i
