Access ‘data-‘ attribute without jQuery

by

On here I found this example:

<div id='strawberry-plant' data-fruit="12"></div>
<script>
    // 'Getting' data-attributes using getAttribute
    var plant = document.getElementById('strawberry-plant');
    var fruitCount = plant.getAttribute('data-fruit'); // fruitCount="12"
    // 'Setting' data-attributes using setAttribute
    plant.setAttribute('data-fruit', '7'); // Pesky birds
</script>

So it would appear very doable.

Update: Since Microsoft is now (2020) phasing out the old Internet Explorer engine in favour of a Chromium based Edge, the dataset property is likely to work everywhere. The exception will, for a time, be organizations and corporate networks where IE is still forced. At the time of writing this though – jsPerf still shows the get/setAttribute method as being faster than using dataset, at least on Chrome 81.

More Related Contents:

  1. what happens when an item is deleted from a javascript array [duplicate]
  2. Javascript return in Function
  3. How to addClass active using on scroll but not using a href id?
  4. How can I make setInterval also work when a tab is inactive in Chrome?
  5. Calling functions with setTimeout()
  6. Get week of year in JavaScript like in PHP
  7. Unable to access JSON property with “-” dash
  8. How to get the text node of an element?
  9. Javascript “this” pointer within nested function
  10. String length in bytes in JavaScript
  11. Is it possible to stop JavaScript execution? [duplicate]
  12. How do I preserve line breaks when getting text from a textarea?
  13. fetch(), how do you make a non-cached request?
  14. Array() vs new Array()
  15. Properties of Javascript function objects
  16. How to populate the options of a select element in javascript
  17. react native use variable for image file
  18. Huge number of files generated for every Angular project
  19. How to use javascript conditionally like CSS3 media queries, orientation?
  20. When using setInterval, if I switch tabs in Chrome and go back, the slider goes crazy catching up
  21. RGB to HSV color in javascript? [closed]
  22. How to save a png from javascript variable
  23. javascript sort of HTML elements
  24. Is there an event for when a Chrome Extension popup is closed?
  25. Resetting form after submit in Angularjs
  26. Get the description of a ES6 Symbol
  27. JavaScript local and global variable confusion [duplicate]
  28. JavaScript dot notation [duplicate]
  29. Portability of nextElementSibling/nextSibling
  30. Deep nested array of objects not rendering

Leave a Comment