javascript 使用. classList.add方法时出现DOM错误

cig3rfwq  于 2023-06-20  发布在  Java
关注(0)|答案(4)|浏览(180)

所以当我试图通过这段代码向我的元素添加两个类时

var curr_class = document.getElementById(hover_start).className
document.getElementById(hover_start).classList.add("cell-red",curr_class)

我有这个错误
未捕获的DOMException:无法在“DOMTokenList”上执行“add”:提供的标记('1 cell-red')包含HTML空格字符,这些字符在标记中无效。
我没有看到任何不正确的白色在这里

ef1yzkbh

ef1yzkbh1#

问题似乎是curr_class是一个包含空格的字符串
根据文档https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList
你应该一个接一个地添加类。
还请注意,您的代码所做的是:它获取一个元素的类并将其添加到同一个元素中,所以没有什么有用的

yhived7q

yhived7q2#

在你的类名称中似乎有一个空格:1 cell-red1cell-red之间。
一个解决方案是逐个添加类:

myElement.classList.add('1');
myElement.classList.add('cell-red');
sqougxex

sqougxex3#

@CharybdeBE是正确的
或者,您可以在add函数中用逗号分隔类。
例如:

myElement.classList.add('class1', 'class2', 'class3');
ijxebb2r

ijxebb2r4#

当类为空字符串时也会发生此错误。因此,有必要:
1.在传入字符串之前修剪它(因为DOMTokenList将尝试修剪并出错)
1.在调用add()之前检查字符串是否为空
1.按空格分割字符串
1.将字符串数组作为参数展开
用于将img转换为canvas的函数的用法示例:

const ns = {
  canvas: (o = {}) => {
    o.img ??= new Image();
    o.cls ??= ''; //can pass in class string with spaces
    o.w ??= 100;
    o.h ??= 100;
    o.canvas ??= document.createElement("canvas");
    o.canvas.width = o.w;
    o.canvas.height = o.h;
    o.ctx = o.canvas.getContext('2d', {
      willReadFrequently: true
    });
    o.ctx.drawImage(o.img, 0, 0, o.w, o.h);
    o.cls.trim(); //trims the whitespace before DOMTokenList errors
    o.cls && o.canvas.classList.add(...o.cls.split[' ']); //string is not empty, split by whitespace, spread as params
    return o.canvas;
  }
}

相关问题