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

时间:2017-12-27 10:50:12

标签: javascript dom

我有一个函数可以在图像大小调整时使用类.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时执行它,以便立即缩放。

1 个答案:

答案 0 :(得分:0)

您可以使用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”属性中添加的节点的信息。你可以检查它们并做你想做的任何事情。