Javascript：在点击事件上获取数据属性

Question

i am trying to alert data-attr value on click event like this

<div class="col-md-2 col-xs-2" onclick="changeImage(event)">
    <img src="img/img1.jpg" data-attr="img1.jpg">
    <img src="img/img2.jpg"  data-attr="img2.jpg">
</div> 

<script type="text/javascript">
        function changeImage(event){
                    var target= event.target;                    
                    alert(target.data-attr);
        }
</script>

here if i target src of image that will alert but data-attr wont how can i do this pleas help

Answer 1

You should use the dataset property to retrieve data-* attributes:

function changeImage(event) {
    var target = event.target;
    alert(target.dataset.attr);
}

Working example

Also, seeing as you tagged this question with jQuery, here's a jQuery implementation without the ugly onclick attribute:

<div class="col-md-2 col-xs-2">
    <img src="img/img1.jpg" data-attr="img1.jpg">
    <img src="img/img2.jpg" data-attr="img2.jpg">
</div>

$(function() {
    $('div.col-md-2').on('click', 'img', function() {
        alert($(this).data('attr'))
    });
});

Example fiddle

Answer 2

Use getAttribute()

function changeImage(event){
      var target= event.target;                    
      console.log( target.getAttribute('data-attr') );
}

Answer 3

Use ELEMENT.getAttribute("ATTRIBUTE") to get any Attribute on a Element:

And in case of the data- Attribute you can also use ELEMENT.dataset.ATTRIBUTE :

 <div class="col-md-2 col-xs-2" onclick="changeImage(event)"> <img src="img/img1.jpg" data-attr="img1.jpg"> <img src="img/img2.jpg" data-attr="img2.jpg"> </div> <script type="text/javascript"> function changeImage(event) { var target = event.target; alert(target.getAttribute("data-attr")); alert(target.dataset.attr); } </script> 

Answer 4

Try using getAttribute() function. Following code depicst the same

 function changeImage(event) { var target = event.target; console.log(target.getAttribute("data-attr")); } 

 <div class="col-md-2 col-xs-2" onclick="changeImage(event)"> <img src="img/img1.jpg" data-attr="img1.jpg"> <img src="img/img2.jpg" data-attr="img2.jpg"> </div>