0

In Firefox (Version 79) with the built-in Developer Tools, is there a way to inspect an element and see the value of a data attribute programatically applied (e.g using JQuery's $element.data('name', 'value') construct)?

Update with example;

For Example, if My HTML is like

<span id="myElement">This is my element</span>

and in my JavaScript, I have done

$("#myElement").data("foo", "bar");

such that there is no data-foo attribute in the HTML, but it is there programmatically, then when viewing in Firefox, if I "Inspect Element", how can I see the value of it?

Vihung
  • 12,947
  • 16
  • 64
  • 90

1 Answers1

1

You can not see the stored value by inspecting the element. because $.fn.data do not stores the information directly on the element (jQuery sotred the value internaly) and you can not access the stored value outside of jQuery.

($('div.target').data('key', 'value'); do not add data-key to the div like <div class='target' data-key='value'>...<div>. so you can not see the value. you have to get value using code.)

You have 2 options:

  1. Don't use $.fn.data, use $.fn.attr instead.
  2. Use $.fn.data(key) to access stored value.

For more info see jQuery Data vs Attr?

P.S: Do not use $.fn.data to add the value and $.fn.attr to get value or vice versa, stick with one of them.

Mehdi Dehghani
  • 10,970
  • 6
  • 59
  • 64