当将带有.scale2by1类的图像添加到DOM时，js触发函数

Question

我有一个函数，可以在图像大小调整时使用类.scale2by1缩放所有图像：

export function scale2by1(images) {
    for (let image of images) {
        let height = image.clientWidth * 0.5
        image.style.height = image.style.maxHeight = height + 'px'
        image.style['object-fit'] = 'cover'
    }
}

我还想在将具有.scale2by1类的新节点添加到DOM时执行它，以便立即进行缩放。

Answer 1

你可以使用MutationObserver实现这一目标。

var config = { subtree: true, childList: true };
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        console.log(mutation.type);
    }
};

var observer = new MutationObserver(callback);
observer.observe(document.body, config);

var container = document.createElement('div')
document.body.appendChild(container);
var span = document.createElement('span')
container.appendChild(span);

来自回调函数的mutationList参数的每个项目都是MutationRecord。此记录包含有关“addedNodes”属性中添加的节点的信息。你可以检查它们并做任何你想做的事情。