CODEWITHSUNDEEP
jqueryfirefoxfirefox-developer-tools
Vihung
Vihung

Reputation: 13397

View programatically assigned 'data' value on element in Firefox with Developer Tools?

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?

Upvotes: 0

Views: 542

Answers (1)

Mehdi Dehghani
Mehdi Dehghani

Reputation: 11601

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.

Upvotes: 1

Related Questions