观察普通JS ES6定制元素中计算出的CSS属性的变化可以通过以下步骤实现:
const observer = new MutationObserver(callback);
function callback(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes') {
console.log('属性变化:', mutation.attributeName);
console.log('新值:', mutation.target.getAttribute(mutation.attributeName));
}
}
}
const targetElement = document.querySelector('#target');
observer.observe(targetElement, { attributes: true });
targetElement.style.color = 'red';
完整的示例代码如下:
const observer = new MutationObserver(callback);
function callback(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes') {
console.log('属性变化:', mutation.attributeName);
console.log('新值:', mutation.target.getAttribute(mutation.attributeName));
}
}
}
const targetElement = document.querySelector('#target');
observer.observe(targetElement, { attributes: true });
targetElement.style.color = 'red';
这样,当目标元素的属性发生变化时,就会在控制台输出属性名称和新值。你可以根据需要修改回调函数来执行其他操作,比如更新UI或发送网络请求。
对于这个问题,腾讯云没有特定的产品与之相关,因此无法提供相关产品和链接地址。
领取专属 10元无门槛券
手把手带您无忧上云