HTML5 data-attributes

Talk about code development, features, specific bugzilla bugs, enhancements, patches, and other highly technical things.
Forum rules
Please keep everything here strictly on-topic.
This board is meant for Pale Moon source code development related subjects only like code snippets, patches, specific referenced Bugzilla bugs, mercurial, etc.

This is not for tech support! Please do not post tech support questions in the "Development" board!
Please make sure not to use this board for support questions. Most "bug reports" do not belong in this board and should initially be posted in Community Support or other relevant support boards.

Please keep things on-topic as this forum will be used for reference for Pale Moon development. Expect topics that aren't relevant as such to be moved or deleted.
Post Reply
thosrtanner
Lunatic
Lunatic
Posts: 254
Joined: 2014-05-10, 18:19
Location: UK

HTML5 data-attributes

Post by thosrtanner » 2019-09-29, 20:00

According to MDN, if you create a data-xxxx attribute on an element, you can use element.dataset to access the various attributes you've set ( and this has been available since firefox 6 apparently).

This doesn't seem to be working for me in my extension, which I'm trying to clean up to not put its own attributes in dom elements which it does with cheerful abandon.

Thus this, in the (basilisk) console:

const thing = document.getElementByID("main-window").firstChild;
thing.setAttribute("data-somename", 10);
console.log(thing.dataset);

produces undefined, rather than an object containing a key of somename with a value of "10".

What am I missing?

vannilla
Keeps coming back
Keeps coming back
Posts: 829
Joined: 2018-05-05, 13:29

Re: HTML5 data-attributes

Post by vannilla » 2019-09-29, 22:03

Javascript accesses those values from the "dataset" property.
From your link:

Code: Select all

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

Code: Select all

const article = document.querySelector('#electric-cars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

thosrtanner
Lunatic
Lunatic
Posts: 254
Joined: 2014-05-10, 18:19
Location: UK

Re: HTML5 data-attributes

Post by thosrtanner » 2019-09-30, 18:57

yes, and that's how I'm attempting to access them.

Code: Select all

const thing = document.getElementByID("main-window").firstChild;
thing.setAttribute("data-somename", 10);
console.log(thing.dataset);
which produces 'undefined'

vannilla
Keeps coming back
Keeps coming back
Posts: 829
Joined: 2018-05-05, 13:29

Re: HTML5 data-attributes

Post by vannilla » 2019-09-30, 19:14

Have you tried assigning something directly to dataset?

Code: Select all

let a = document.getElementById('my-fantastic-object');
a.dataset.magic = 85;
console.log(a);
It should print the element as a HTML tag with a data-magic attribute, e.g.

Code: Select all

<p data-magic="85">
It works on a normal webpage at least, but I don't see how it could differ within an extension, unless you are dealing with XUL rather than actual HTML.

Post Reply