What is data-target and data-slide-to attribute?

Xinrui Ma picture Xinrui Ma · Nov 7, 2013 · Viewed 55.9k times · Source

I am using bootstrap, (Ok, I am new to it), I found this two attributes, can somebody explain it to me?

Answer

Watchful Protector picture Watchful Protector · Nov 7, 2013

Just to carry forward the point of @Larsenal, custom data attributes could be very handy for developers. Like the spec says:

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is independent of the site that uses the attributes.

Example usage includes:

Storing initial height/width, which might later be changed with JS. There are easy ways to get and set these attributes through JavaScript - using getAttribute and setAttribute.

 <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'
 </script>

Remember though, this is not good practice. So, make use of dataset properties.

Read more about data-attributes here: http://html5doctor.com/html5-custom-data-attributes/

You would fall in love with them as a JavaScript developer (or maybe not).