用空格修改CSS名称时出现Javascript InvalidCharacterError

我正在修改一些通过JavaScript动态生成的按钮。我无法控制静态声明的类名，这就是为什么我写了一个函数在页面加载时为我做这件事的原因。我了解为什么会发生这种情况(它不喜欢“社交按钮”中的空格)，我只需要修复即可，而JavaScript绝对不是我的天赋。如果您检查页面上的按钮，这是错误:
Unncaught InvalidCharacterError:无法在“DOMTokenList”上执行“add”:提供的 token (“zocial facebook”)包含HTML空格字符，在 token 中无效。
这是我的JavaScript代码:

var buttonz = document.getElementsByName('provider');
for (var i = 0, length = buttonz.length; i < length; i++) {
    if (buttonz[i].value == 'Facebook')
    {
        buttonz[i].classList.remove('btn-default');
        buttonz[i].classList.add('zocial button');
    }

如果您想在这里看到它，可以去:
http://jsbin.com/nifuxoyo/1/watch

最佳答案

好的，类名不能包含空格，因为空格将多个类名彼此分隔。例如，如果您的HTML包含

class="zocial button"

这意味着该元素具有两个类，即“zocial”和“button”。

如果要添加这两个类，则必须将每个类作为参数传递给方法:

buttonz[i].classList.add('zocial', 'button');

可以在MDN documentation中找到更多信息。