使用CSS变量：
第一个

如果你设置了一个过滤器属性，你重写了它的所有字符串，而不是追加到它里面。所以你需要创建一个变量来存储所有的过滤器属性。例如，它可以是一个数组。然后在这个数组中推送或拼接你的属性，并用结果更新过滤器。例如：

let arr = [];
arr.push('brightness(0.5)');
arr.push('drop-shadow(2px 4px 6px black)');

然后更新筛选属性：

document.querySelector('#test').style.filter = arr.join(' ');

另一种方法是编写获取filter字符串的函数，将其转换为数组，然后执行与上面相同的操作。
要将CSS和element.style.filter结合起来，可以尝试如下操作：

function addFilter( element, filterValue ){
    let prop = getComputedStyle( element ).getPropertyValue('filter');
    if( prop === 'none' ){
        element.style.filter = filterValue;
    } else {
        let arr = prop.split(' ');
        if( arr.includes(filterValue) ) return;
        arr.push(filterValue);
        element.style.filter = arr.join(' ');
    }

}

function removeFilter( element, filterValue ){
    let prop = getComputedStyle( element ).getPropertyValue('filter');
    if( prop === 'none' ) return;
    let arr = prop.split(' '),
        index = arr.indexOf(filterValue)
    if( index !== -1 ) arr.splice( index, 1 );
    element.style.filter = arr.join(' ');
}

function setBrightness( element, val ){
    let prop = getComputedStyle( element ).getPropertyValue('filter');
    if( prop === 'none' ) prop = 'brightness(1)';
    prop = prop.replace( /brightness\(\d+(\.\d+)?\)/g, `brightness(${val})` );
    element.style.filter = prop;
}