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

【问题标题】：Javascript InvalidCharacterError when modifying a css name with a space用空格修改css名称时出现Javascript InvalidCharacterError
【发布时间】：2014-04-03 17:33:10
【问题描述】：

我正在修改一些通过 JavaScript 动态生成的按钮。我无法控制静态声明类名，这就是为什么我编写了一个函数来在页面加载时为我做这件事。我理解它为什么会发生（它不喜欢“zocial button”中的空间），我只需要修复，而且我绝对没有 JavaScript 天赋。如果您检查页面上的按钮，则会出现以下错误：未捕获的 InvalidCharacterError：无法在“DOMTokenList”上执行“添加”：提供的令牌（“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

【问题讨论】：

类在 HTML 中不能有空格。请尝试分别添加“zocial”和“button”或使用“-”（破折号？）。

标签： javascript css dom

【解决方案1】：

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

class="zocial button"

表示这个元素有两个类，“zocial”和“button”。

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

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

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

【讨论】：

谢谢老兄...当你知道它时它很简单;）