使用 JavaScript Observer 方法更改 aria 属性值

Question

谁能提供一个 HTML div 元素的示例，该元素具有 aria-highlight 属性，使用 JavaScript 观察者方法更改并通知元素？一个例子是使用一个复选框来切换 div 并更改 div 元素的背景。我需要在 vanilla JavaScript 中完成此操作

示例 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>

Answer 1

下面，您有一个带有事件处理程序的复选框来切换aria-highlight 值。

还有一个观察者，它触发 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>