Stack Overflow
Stack Overflow

Questions tagged [custom-data-attribute]

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.

The HTML5 spec contains a "Embedding custom non-visible data with the data-* attributes" chapter that states the folowing:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

[...]

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.

1101 questions
131
votes
7 answers

Unable to set data attribute using jQuery Data() API

I've got the following field on an MVC view: @Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" }) In a seperate js file, I want to set the data-helptext attribute to a string value. Here's my…
Jason Evans
  • 28,906
  • 14
  • 90
  • 154
111
votes
11 answers

jQuery: Select data attributes that aren't empty?

I'm trying to select all elements that have a data-go-to attribute that is not empty. I've tried $('[data-go-to!=""]') but oddly enough it seems to be selecting every single element on the page if I do that.
Shpigford
  • 24,748
  • 58
  • 163
  • 252
109
votes
3 answers

CSS values using HTML5 data attribute

width: attr(data-width); I want to know if there's any way it's possible to set a css value using HTML5's data- attribute the same way that you can set css content. Currently it doesn't work. HTML
CSS div { width:…
James Kyle
  • 4,138
  • 4
  • 28
  • 41
104
votes
10 answers

Using HTML data-attribute to set CSS background-image url

I plan on building a custom photo gallery for a friend and I know exactly how I am going to be producing the HTML, however I am running into a small issue with the CSS.(I would prefer to not have the page styling rely on jQuery if possible) My…
stephenkelzer
  • 1,234
  • 2
  • 12
  • 20
98
votes
6 answers

Why does JS code "var a = document.querySelector('a[data-a=1]');" cause error?

I've an element in the DOM: Link I want to get this element via its HTML5 custom data attribute data-a. So I write JS codes: var a = document.querySelector('a[data-a=1]'); But this code doesn't work and I get an error in…
weilou
  • 4,419
  • 10
  • 43
  • 56
85
votes
6 answers

SelectListItem with data-attributes

Is there anyway to have a SelectList prepopulated on ViewModel with data-attributes ? I want to do @Html.DropdownListFor(m=> m.CityId, Model.Cities); so it generates code like : but if I want…
MikeW
  • 4,749
  • 9
  • 42
  • 83
46
votes
3 answers

jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity

How to get data attributes using jquery .data()? In which case html5 data-* attributes converts to lowercase and camelcase? What are all the main rules to follow while using custom attributes to store data?
Kiran
  • 20,167
  • 11
  • 67
  • 99
44
votes
2 answers

Is there any problem with using HTML5's "data-*" attributes for older browsers?

I want to associate some custom data with some HTML nodes. I was going to use the new HTML5 style 'data-*' attributes. e.g.: …, and then I was going to select this HTML node and show/hide it etc. by reading the value…
Amandasaurus
  • 58,203
  • 71
  • 188
  • 248
1
2
3
…
73 74