How to Change HTML Object Element Data Attribute Value in JavaScript

How to change HTML Object element data attribute value in javascript

and in jquery:

$('element').attr('some attribute','some attributes value')

i.e

$('a').attr('href','http://www.stackoverflow.com/')

Change html data attribute value

data() is not an accessor function for data-* attributes. It's an accessor for jQuery's data cache for the element, which is only initialized from data-* attributes.

If you want to read the data-bla attribute's value, use attr("data-bla"), not data("bla"). If you want to set the bla data item, use data("bla", newValue), not attr("data-bla", newValue).

E.g., use attr() for both get and set, or use data() for both get and set, but don't mix them, because they manage different things.

Using attr():

$(document).ready( function () {
  $("#bla").on( "click", function () {          alert( $(this).attr('data-bla') );       $(this).attr('data-bla', "2");    });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><div id="bla" data-bla="1">  button</div>

Can't update data-attribute value

THE ANSWER BELOW IS THE GOOD ONE

You aren't using the data method correctly. The correct code to update data is:

$('#foo').data('num', num); 

So your example would be:

var num = $('#foo').data("num") + 1;       
console.log(num)       
$('#foo').data('num', num); 
console.log(num)

How to change HTML Attribude with JavaScript

document.getElementById("myId").setAttribute("data-theme", "newValue")

How to access data-attributes of HTML elements using javascript

This answer shows how you can get a custom attribute from JavaScript.

Summary: you can use getAttribute()

x.getAttribute("data-amount");

EDIT:@James also makes a good point, which is x is the selector, not the option. Thus you will probably need a combination of our two answers:

x.options[x.selecetdIndex].getAttribute("data-amount");

how to prevent HTML object element with binded data attribute from refreshing after full screen on samsung internet browser

I used iframe instead of object and problem solved!

Changing data attribute

For changing the data-dropoff-min value

$('select[class="hour"]').attr('data-dropoff-hour', "Your Updated value");

Replace the string "Your Updated value" with your updated value.

In general,
$(selector).attr('data-attribute', 'updated value');

Hope this will help you.

How to add a 'data-*' attribute when using Object.assign to create an html element

Maybe this might be a nicer way to do this, if all you want is to set attributes to the image element.

const imageRef = document.createElement('img');

Object.entries({
    className: 'carouselItem',
    src: `/public/leerlingen/${data.item}`,
    loading: 'eager',
    'data-showtime': data.duration
}).forEach(([key, value]) => {
    imageRef.setAttribute(key, value);
});

Change data-attribute on click of HTML elements

Here is a pure javascript example in the below jsfiddle:

http://jsfiddle.net/pya9jzxm/14

    var tbody = document.querySelector('tbody');
    var trs = tbody.querySelectorAll('tr');
    var tr, index = 0, length = trs.length;
    for (; index < length; index++) {
        tr = trs[index];
        tr.setAttribute('data-state', 'enabled');
        tr.setAttribute('data-display', 'collapsed');
        tr.addEventListener('click',
            function () {
                if (this.classList.contains('alphabet-label')) {
                    return;
                }
                var trIndex = 0, trLength = trs.length, hasExpanded = false;
                var state = 'disabled';
                if (tbody.querySelectorAll('[data-display="expanded"]').length > 0) {
                    hasExpanded = true;
                    state = 'enabled';
                }
                for (; trIndex < trLength; trIndex++) {
                    trs[trIndex].setAttribute('data-state', state);
                    trs[trIndex].setAttribute('data-display', 'collapsed');
                }
                if (!hasExpanded) {
                    this.setAttribute('data-state', 'enabled');
                    this.setAttribute('data-display', 'expanded');
                }
            }
        );
    }
};

---

Related Topics