MutationRecord: `attributeName`-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die schreibgeschützte Eigenschaft attributeName des MutationRecord enthält den Namen eines geänderten Attributs, das zu einem Knoten gehört, der von einem MutationObserver beobachtet wird.
Wert
Wenn der type des Eintrags attributes ist, stellt dies einen String dar, der den Namen des mutierten Attributs des Mutationsziels darstellt.
Wenn der type des Eintrags nicht attributes ist, ist dies null.
Beispiele
Zuletzt aktualisierten Attributnamen erhalten
Im folgenden Beispiel gibt es vier Schaltflächen: zwei ändern das style-Attribut des h1-Elements, und zwei ändern das class-Attribut des h1-Elements. Das Skript verwendet einen MutationObserver, um die Änderungen zu erkennen und wird den untenstehenden Text mit dem Namen des letzten geänderten Attributs aktualisieren.
HTML
<h1 class="blue" id="hiMom">Hi, Mom!</h1>
<button id="redButton">Set class to "red"</button>
<button id="blueButton">Set class to "blue"</button>
<button id="whiteButton">Set style to "color:white;"</button>
<button id="blackButton">Set style to "color:black;"</button>
<p id="log">Updated attribute name:</p>
CSS
.red {
background-color: red;
}
.blue {
background-color: blue;
}
JavaScript
const hiMom = document.querySelector("#hiMom");
const redButton = document.querySelector("#redButton");
const blueButton = document.querySelector("#blueButton ");
const whiteButton = document.querySelector("#whiteButton");
const blackButton = document.querySelector("#blackButton");
const log = document.querySelector("#log");
redButton.addEventListener("click", () => {
hiMom.classList.add("red");
hiMom.classList.remove("blue");
});
blueButton.addEventListener("click", () => {
hiMom.classList.add("blue");
hiMom.classList.remove("red");
});
whiteButton.addEventListener("click", () => {
hiMom.style.color = "white";
});
blackButton.addEventListener("click", () => {
hiMom.style.color = "black";
});
function logLastAttr(mutationRecordArray) {
for (const record of mutationRecordArray) {
if (record.type === "attributes") {
log.textContent = `Updated attribute name: ${record.attributeName}`;
}
}
}
const observer = new MutationObserver(logLastAttr);
observer.observe(hiMom, { attributes: true });
Ergebnis
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-mutationrecord-attributename② |
Browser-Kompatibilität
Loading…