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

Question

我正在修改一些通过 JavaScript 动态生成的按钮。我无法控制静态声明类名，这就是为什么我编写了一个函数来在页面加载时为我做这件事。我明白为什么会这样(它不喜欢“社交按钮”中的空格)，我只需要修复，我绝对不是 JavaScript 天才。如果您检查页面上的按钮，则会出现以下错误:Uncaught InvalidCharacterError:无法在“DOMTokenList”上执行“添加”:提供的 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

Answer 1

嗯，类名不能包含空格，因为空格将多个类名相互分隔开。例如，如果您的 HTML 包含

class="zocial button"

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

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

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

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