使用函数和classList添加多个css选择器

Question

我尝试使用函数内部的classList向一个元素添加多个css选择器，但一直收到下面的错误。我该怎么做才是对的呢？

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': 
The token provided ('padding fonts') contains HTML space characters, which are not valid in tokens.

https://jsfiddle.net/nordy/h84gadst/1/

function addStyle(element,styleName) {
    element.classList.add(styleName);
}

var targetElement = document.getElementById("parent-container");

var addStyleElement = document.getElementById("addStyle");

addStyleElement.onclick = function() {
    addStyle(targetElement,'padding fonts');
}

Answer 1

主要的问题是类不能包含空格，您可以添加多个用逗号分隔的类，如下所示：

element.classList.add('padding','fonts');

EDIT:如果你想在同一个字符串中发送多个类，你可以在下面的方法中实现：

function addStyle(element,styleName) {
    styleName.split(" ").forEach(class => element.classList.add(class));
}

Answer 2

如果你这样做，它应该可以工作，空间是问题所在。

addStyleElement.onclick = function() {
addStyle(targetElement,'padding');
addStyle(targetElement,'fonts');

}