Adding data attribute to DOM
Use the .data() method: $(‘div’).data(‘info’, ‘222’); Note that this doesn’t create an actual data-info attribute. If you need to create the attribute, use .attr(): $(‘div’).attr(‘data-info’, ‘222’);
custom-data-attribute
Why should I prepend my custom attributes with “data-“?
There are several benefit for keeping custom attributes prefixed with data-*. It guarantees there will not be any clashes with extensions to HTML in future editions. This is a problem that has been encountered to some degree already with some of the new attributes introduced in HTML5, where existing sites were using attributes with the … Read more
Using HTML data-attribute to set CSS background-image url
You will eventually be able to use background-image: attr(data-image-src url); but that is not implemented anywhere yet to my knowledge. In the above, url is an optional “type-or-unit” parameter to attr(). See https://drafts.csswg.org/css-values/#attr-notation.
Are empty HTML5 data attributes valid?
Yes, perfectly valid. In your case, data-modal-target would represent a boolean attribute: 2.4.2 Boolean attributes The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
Unable to set data attribute using jQuery Data() API
It is mentioned in the .data() documentation The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery) This was also covered on Why don’t changes to jQuery $.fn.data() update the corresponding html 5 data-* … Read more
jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity
HTML5 allows us to create our own custom attributes to store data. Custom attributes can be called anything we like, like variable names, but they need to be prepended with the word ‘data’, and words are separated by dashes. You could add “foo”, “bar”, and “foo bar” data attributes to an input like this: <input … Read more
How to use dashes in HTML-5 data-* attributes in ASP.NET MVC
This problem has been addressed in ASP.Net MVC 3. They now automatically convert underscores in html attribute properties to dashes. They got lucky on this one, as underscores are not legal in html attributes, so MVC can confidently imply that you’d like a dash when you use an underscore. For example: @Html.TextBoxFor(vm => vm.City, new … Read more
How to set data attributes in HTML elements
HTML <div id=”mydiv” data-myval=”10″></div> JS var a = $(‘#mydiv’).data(‘myval’); //getter $(‘#mydiv’).data(‘myval’,20); //setter Demo Reference From the reference: jQuery itself uses the .data() method to save information under the names ‘events’ and ‘handle’, and also reserves any data name starting with an underscore (‘_’) for internal use. It should be noted that jQuery’s data() doesn’t change … Read more
jQuery selectors on custom data attributes using HTML5
$(“ul[data-group=’Companies’] li[data-company=’Microsoft’]”) //Get all elements with data-company=”Microsoft” below “Companies” $(“ul[data-group=’Companies’] li:not([data-company=’Microsoft’])”) //get all elements with data-company!=”Microsoft” below “Companies” Look in to jQuery Selectors :contains is a selector here is info on the :contains selector
How can I get the values of data attributes in JavaScript code?
You need to access the dataset property: document.getElementById(“the-span”).addEventListener(“click”, function() { var json = JSON.stringify({ id: parseInt(this.dataset.typeid), subject: this.dataset.type, points: parseInt(this.dataset.points), user: “Luïs” }); }); Result: // json would equal: { “id”: 123, “subject”: “topic”, “points”: -1, “user”: “Luïs” }