JavaScript 如何编程设置 li:before 的 background-image 图片路径

实现原理 #

伪元素不属于DOM树内可直接操作的节点，没法通过jQuery或原生JS直接选中修改它的样式，最贴合现有代码、不需要大改结构的方式是通过自定义CSS变量向伪元素传递动态图片路径，不需要重构已经写好的列表样式。

具体改造步骤 #

1. 修改原有静态CSS定义，把之前写死的background-image值替换为可接收动态参数的CSS变量，同时补上伪元素必须的宽高属性——不然空的inline-block伪元素没有实际渲染尺寸，就算设了背景图也显示不出来：

   ul.fileList {
       background-color: white;
       list-style: none;
   }
   ul.fileList > li:before {
       content: '';
       display: inline-block;
       width: 30px;
       height: 30px;
       background-size: 30px;
       /* 读取自定义变量值，把原来写死的路径作为兜底默认值 */
       background-image: var(--li-icon-url, url('/Resources/imageFileIcon.png'));
       background-repeat: no-repeat;
   }
   

2. 修改动态生成列表项的JS逻辑，在每个新增的li节点上给对应CSS变量赋值：

   for (var i = 0; i < files.length; i++) {
       // 单独创建li节点，方便后续逐个配置样式
       let $newLi = $("<li><a href='#'>" + files[i] + "</a></li>");
       // 按实际业务逻辑取当前文件对应的图标路径，比如按文件后缀匹配图标
       const currentIconPath = getFileIconPath(files[i]);
       // 给当前li设置自定义CSS变量，节点内部的before伪元素会自动继承这个值
       $newLi[0].style.setProperty('--li-icon-url', `url('${currentIconPath}')`);
       // 把配置好的li追加到列表容器里
       $("ul.fileList").append($newLi);
   }
   

实操注意点 #

• 写入CSS变量的URL值要做好引号转义，避免出现CSS解析报错
• 不需要额外写逻辑动态插入style标签重写伪元素样式，CSS变量的继承机制可以保证每个列表项的伪元素独立读取到所属节点的配置，不会出现样式污染
• 如果个别列表项没有单独设置图标，会自动使用默认的/Resources/imageFileIcon.png作为兜底，不需要额外加判断逻辑

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