Saving data in class attribute good or bad

Question

I am using class attribute to save data. I know using data attribute is the standard these days but I wanted to know if there would be any problem storing them in class attribute. I want to use class because older browsers don't support data attribute. I am saving URLs in them and then pulling those using javascript. Eg,

<div class="mdiv http://google.com"></div>
and getting it like:
document.getElementsByClassName('mdiv')[0].getAttribute('class').split(" ")[1]

Which old browser does not support data attributes? There is nothing special in them, just make sure not to use `dataset`. — Oriol, Aug 02 '16 at 18:59
@Oriol IE8 supports it 'partially' only. older IEs don't support it. — B A, Aug 02 '16 at 19:04
According to http://caniuse.com/#search=getAttribute, IE6 supports it fully. — Oriol, Aug 02 '16 at 19:05

score 2 · Answer 1 · answered Aug 02 '16 at 18:59

2

You don't need to use class attribute for that. You can use any other data- attribute that's perfectly valid in HTML5.

answered Aug 02 '16 at 18:59

Pablo Santa Cruz

176,835
32
241
292

thanks but avoiding using the data attribute is my goal because i read old browsers don't support it, what do you think? Also what about older mobile browsers, do they support it? – B A Aug 02 '16 at 19:01
@BA what do you mean by OLDER? how older? I think you will be fine. – Pablo Santa Cruz Aug 02 '16 at 19:06
@yuriy636 thanks. it says partial support for IE8 and older IEs don't support it. – B A Aug 02 '16 at 19:06
@BA In caniuse, you need to click on show all. It shows that ALL browser at least have partial support for it. – ShuberFu Aug 02 '16 at 19:09
Im reading a bit and looks like the partial support in IE is due to lack of support to `set` data. But it can be read by using `getAttribute()` http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6 – yuriy636 Aug 02 '16 at 19:15

score 1 · Answer 2 · answered Aug 02 '16 at 19:06

1

Honestly, I would not worry about old browsers not supporting the data attribute unless you're expecting a high amount of traffic from older browsers, it just isn't feasible anymore to work around browsers that old.

However, if you really need to, I may suggest using an anchor wrapped around the div and just pulling the href from it. It's just a little cleaner.

<a class="someclass" href="http://google.ca">
  <div class="mydiv"></div>
</a>

If you don't want the link clickable, you can disable the link with some CSS:

 a.someclass {
  pointer-events: none;
  cursor: default;
}

As for grabbing the href of it:

document.getElementsByClassName('someclass')[0].href;

answered Aug 02 '16 at 19:06

Ryan Fitzgerald

423
2
9

thanks. the reason i don't want to use is for SEO reasons because there are too many of these outgoing links on the page and so just want to add them using javascript. – B A Aug 02 '16 at 19:08
If that's the case, I would stick with the data attribute. IE < 8 is so rarely used these days it is not worth the trouble. You can sit here all day coming up with solutions, but they will all be messy. For example, adding a hidden span within the div and grabbing the link from that. – Ryan Fitzgerald Aug 02 '16 at 19:10

score 1 · Answer 3 · answered Aug 02 '16 at 19:51

Do not use classes for that. Use data-* attributes.

Browsers don't care about the HTML validity of attributes. There is no such thing as "data attribute support". You can access them using attribute methods, which are part of the DOM, and even IE6 should fully support them.

element.getAttribute('data-foo');
element.setAttribute('data-foo', 'value');

However, modern browsers allow you to access data-* attributes via dataset. That won't be supported in old browsers. Just avoid it and use the old DOM attribute methods.

Saving data in class attribute good or bad

3 Answers3