如何用JavaScript动态设置列表项的listStyleType为自定义变量值？

问题出在你给listStyleType赋值时，没有给变量值加上引号包裹。当用自定义字符串作为项目符号时，CSS要求这个字符串必须放在引号里，就像你第一个示例里的"abcd"一样。

你原来的代码直接把id变量赋值给listStyleType，相当于传递了一个无引号的字符串，这不符合CSS语法要求，所以浏览器会忽略这个设置， fallback到默认的项目符号。

修改后的代码可以用模板字符串实现：

// 假设循环遍历data.txt的每一行
var values = line.split(';');
var id = values[0];
var listItem = document.createElement('li');
// 给变量加上双引号包裹
listItem.style.listStyleType = `"${id}"`;

如果习惯传统字符串拼接写法，也可以这样写：

listItem.style.listStyleType = '"' + id + '"';

这样浏览器就能正确识别你传入的自定义项目符号字符串了。

内容的提问来源于stack exchange，提问作者Krijn