Change aria attribute value using JavaScript Observer method

Question

Can someone provide me with an example of an HTML div element with an attribute of aria-highlight that changes and notifies the element using the JavaScript observer method? An example would be using a checkbox that toggles the div and changes the background of the div element. I need this done in vanilla JavaScript

Example HTML

<div id="mydiv" aria-highlight="false" style="background: red; height: 100px; width: 100px"></div>
<label for="highlight"><input type="checkbox id="highlight">Highlight Div</label>

There is no "JavaScript observer method". There are several different types in the browser DOM that implement the observer pattern, like the MutationObserver mentioned in the answer, or the IntersectionObserver type. Please be more specific about what you're talking about. — Heretic Monkey, Feb 12 '21 at 04:01
Does this answer your question? [JavaScript: Listen for attribute change?](https://stackoverflow.com/questions/41424989/javascript-listen-for-attribute-change) — Heretic Monkey, Feb 12 '21 at 04:11

score 1 · Accepted Answer · answered Feb 12 '21 at 03:57

So below, you have a checkbox with an event handler to toggle the aria-highlight value.

And an observer which triggers on attribute change from the div.

// Our two elements
let square = document.querySelector("#mydiv")
let chk = document.querySelector("#highlight")

// Checkbox click handler
chk.addEventListener("click", function(){
  square.setAttribute("aria-highlight",this.checked)
})

// That is the function called when there is a mutation event
var callback = function(mutationsList) {
 for(var mutation of mutationsList) {
   if (mutation.type == 'attributes') {
    console.log("The attribute '" + mutation.attributeName + "' was modified.");
   }
 }
};

// The mutation observer
var observer = new MutationObserver(callback);
observer.observe(square, { attributes: true });

<div id="mydiv" aria-highlight="false" style="background: red; height: 100px; width: 100px"></div>
<label for="highlight"><input type="checkbox" id="highlight">Highlight Div</label>

Another question! how do you access the element in the observer — ONYX, Feb 12 '21 at 04:05
With `mutation.target`. Try `console.log(mutation.target.style.background)` for fun ;) — Louys Patrice Bessette, Feb 12 '21 at 04:09

Change aria attribute value using JavaScript Observer method

1 Answers1