使用空格修改css名称时的Javascript InvalidCharacterError

Question

我正在修改一些通过JavaScript动态生成的按钮.我无法控制静态声明类名,这就是为什么我在页面加载时为我编写了一个函数.我理解它为什么会发生(它不喜欢'zocial button'中的空格),我只需要一个修复,我绝对不是那个有天赋的JavaScript.如果您检查页面上的按钮,则会出现以下错误:Unncaught InvalidCharacterError:无法在'DOMTokenList'上执行'add':提供的令牌('zocial facebook')包含HTML空格字符,这些字符在令牌中无效.这是我的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

Answer 1

好吧,类名不能包含空格,因为空格将多个类名彼此分开.例如,如果您的HTML包含

class="zocial button"

这意味着这个元素有两个类,"zocial"和"button".

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

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

可以在MDN文档中找到更多信息.