最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - The "data" attribute in elements - Stack Overflow

programmeradmin6浏览0评论

I don't have any trouble running my code. My question is: is this what I'm doing a good practice? Is this cross-browser/cross-platform patible? I'm using xhtml strict doctype.

<div id="element" data='{"foo":"bar"}'></div>
<script type="text/javascript">
  alert($('#element').attr('data'));
</script>

Now you probably wonder why I'm not doing:

<div id="element"></div>
<script type="text/javascript">
  $('#element').data('json', '{"foo":"bar"}');
  alert($('#element').data('json'));
</script>

I give you an example why I'm doing so. I'm loading all ments in one website with the default avatar image I want to load the right image only when the user scrolls down so I need to store somewhere the right image source.

<img id="avatar-1" src="default.png" data='{"src": "user-avatar.png"}' />

without this I need to do:

<img id="avatar-1" src="default.png" />
<script type="text/javascript">
  $('#avatar-1').data('json', '{"src": "user-avatar.png"}');
</script>

And that produces dozens unnecessary script tags. I know I can merge all these scripts in php and than display at once but the code will not be so readable like with the "data" solution.

If you know any better solution please let me know.

I don't have any trouble running my code. My question is: is this what I'm doing a good practice? Is this cross-browser/cross-platform patible? I'm using xhtml strict doctype.

<div id="element" data='{"foo":"bar"}'></div>
<script type="text/javascript">
  alert($('#element').attr('data'));
</script>

Now you probably wonder why I'm not doing:

<div id="element"></div>
<script type="text/javascript">
  $('#element').data('json', '{"foo":"bar"}');
  alert($('#element').data('json'));
</script>

I give you an example why I'm doing so. I'm loading all ments in one website with the default avatar image I want to load the right image only when the user scrolls down so I need to store somewhere the right image source.

<img id="avatar-1" src="default.png" data='{"src": "user-avatar.png"}' />

without this I need to do:

<img id="avatar-1" src="default.png" />
<script type="text/javascript">
  $('#avatar-1').data('json', '{"src": "user-avatar.png"}');
</script>

And that produces dozens unnecessary script tags. I know I can merge all these scripts in php and than display at once but the code will not be so readable like with the "data" solution.

If you know any better solution please let me know.

Share Improve this question edited Dec 20, 2015 at 19:20 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Dec 26, 2010 at 15:04 katkat 1251 silver badge5 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

As parent5446 suggests in his answer, the nice way to do this is with HTML5's custom data attributes. These begin data- and can be used for your application's own purposes. They will otherwise be ignored by the browser.

Even better, the most recent versions of jQuery will automatically load them into a .data() call, so you don't need to do a hacky call to .attr().

You could use the following HTML:

<img id="avatar-1" src="default.png" data-src="user-avatar.png" />

And then access it in the following way with jQuery:

alert($('#avatar-1').data('src'));

For some reason it seems the data attribute in the way you're using it simply does not exist. The only data attribute in XHTML is that of the tag. You might be talking about the custom data tags in HTML5. It is very well possible that jQuery is thinking your code is HTML5 and treating the data attributes as such, but I'm not too sure on that part.

Just adding from a ment on this question below, it turns out JavaScript has always been able to read arbitrary attributes, but it will not validate and some developers consider it bad form.

发布评论

评论列表(0)

  1. 暂无评论