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
16
votes
2 answers

Difference between href and data-href in anchor tag in html

What is the difference between href and data-href attribute in html tag? My current code is written below: Sign In with Facebook and…
Swamy
  • 400
  • 1
  • 3
  • 15
16
votes
1 answer

HTML "data-attribute" vs simple "custom attribute"

I usually saw html data-attribute(s) to add specific values/parameters to html element like Bootstrap that uses them to "link" buttons to modal dialog to be opened, etc.
15
votes
2 answers

Inserting custom data attributes into jQuery DataTables

Problem: I am using JQuery DataTables v1.10 for a work-related project. The project requires a Datatable to be defined and created with parsed JSON data passed in as the values of the table Once the datatable has been created, every cell in each…
user2360062
  • 663
  • 2
  • 7
  • 19
15
votes
1 answer

CSS data attribute conditional value selector?

Given html such as :
Jonh
Jack
Julian
How to select elements were the value is superior to 1000 (x>1000) ? Preference : via CSS selectors. If no such thing,…
Hugolpz
  • 17,296
  • 26
  • 100
  • 187
15
votes
3 answers

How to use a button's "data-" attribute to call a selected JavaScript function

I'm trying to set some data on my buttons such that it can be accessed onclick. I'm having no problem using JSON in a button's data attribute where the key value is a string. However, I can't figure out how to set the values to be a function. What…
tim peterson
  • 23,653
  • 59
  • 177
  • 299
14
votes
3 answers

jQuery - How to add HTML 5 data attributes into the DOM

I am trying to add a HTML 5 data attribute into the DOM. I have seen on the jQuery site the format for data attributes is: $('.pane-field-related-pages ul').data("role") === "listview"; But this doesnt seem to add anything into the DOM? How can I…
Adi
  • 4,034
  • 13
  • 56
  • 78
14
votes
1 answer

using html data-attributes as css-variable (i.e. text-shadow)

i'm trying to use inline data-attributes as variables for css... is there any known option to get this run: .mycss-class {text-shadow: attr(data-textshadow); }
lorem ipsum
chrome…
G.K.
  • 206
  • 1
  • 2
  • 7
14
votes
2 answers

How to add HTML custom data- attributes to a rails form label tag?

I have a rails form that has this code: <%= form_tag("../vehicles", method: "get") do %>
<%= label_tag(:address, t("ui.reservations.pickup"), data-addr: 'here') %>
<%= label_tag(:address,…
Michael Durrant
  • 93,410
  • 97
  • 333
  • 497
13
votes
4 answers

React TypeScript get Data Attribute From Click Event

So I have a React component with a button which has a click handler which uses the data-* attribute. If this was straight React then I know how to get the value from the data-* attribute. However I am learning how to use TypeScript so I have no idea…
Scott Kingdon
  • 351
  • 1
  • 2
  • 9
13
votes
2 answers

Do html5 data attributes need a value?

I am wondering if html data attributes actually need a value to be applied? I wonder this because often all we want to know is if the attribute is actually set to act as a flag. (sure we could use a class for this; but realistically unless you are…
Hailwood
  • 89,623
  • 107
  • 270
  • 423
13
votes
2 answers

How can I use a data attribute to set a background-image in CSS?

I have a folder with a few background images (one.jpg, two.jpg, three.jpg) , and this markup
Would it…
Enrique Moreno Tent
  • 24,127
  • 34
  • 104
  • 189
12
votes
5 answers

Selecting custom data attributes in JQuery

I have a list here
11
votes
1 answer

jquery datepicker - override options from data-attribute

I'm using this markup