如何将DOMStringMap中的ID值引入CSS的background-image URL？

问题描述 #

我需要对网页中这类<button>元素做通用CSS样式修改：

<button data-action="link" class="cardImageContainer coveredImage cardContent itemAction lazy lazy-image-fadein-fast" data-blurhash="long string that IDK if is identifying or not" aria-label="sample_video" data-id="7215c9b47ed950ddeb42219e4b4091a1" style="background-image: url('http://localhost:8096/Items/7215c9b47ed950ddeb42219e4b4091a1/Images/Primary?');"></button>

目前手动把DOMStringMap里的长ID写进CSS的话，这段代码能生效：

.card:hover .cardImageContainer,
.card.show-animation:focus .cardImageContainer {
    background-image: url("/Items/7215c9b47ed950ddeb42219e4b4091a1/Images/Logo?") !important;
}

但我想自动获取元素dataset.id里的ID，替换到悬停背景图的URL中，尝试用url("/Items/dataset:id/Images/Logo?")的写法无效，求可行方案。

解决方案 #

CSS本身没法直接读取元素的dataset属性来拼接URL，得借助JavaScript把ID转成CSS变量，再在CSS中引用：

1. 编写JavaScript代码提取ID并设置CSS变量 #

// 获取所有目标按钮元素
const cardImageElements = document.querySelectorAll('.cardImageContainer');

cardImageElements.forEach(element => {
    // 从dataset中获取ID
    const itemId = element.dataset.id;
    // 找到元素所在的.card父容器
    const parentCard = element.closest('.card');
    
    if (parentCard && itemId) {
        // 给父容器设置CSS变量--item-id
        parentCard.style.setProperty('--item-id', `"${itemId}"`);
    }
});

如果页面是动态加载内容（比如滚动加载新卡片），需要在内容加载完成后重新执行这段代码，或者用MutationObserver监听新元素的添加。

2. 修改CSS代码引用变量 #

.card:hover .cardImageContainer,
.card.show-animation:focus .cardImageContainer {
    background-image: url("/Items/" var(--item-id) "/Images/Logo?") !important;
}

原理说明 #

• JavaScript负责遍历每个目标元素，提取dataset.id的值，把它存入父容器的CSS变量--item-id中
• CSS通过var(--item-id)引用这个变量，拼接成完整的背景图URL，实现通用化的样式效果

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