Question

我的脚本动态创建按钮：

let foo (obj) {
     let button = document.createElement('button');
     ...
}

这些按钮来自obj的CSS样式

button.style.cssText = obj.cssText

现在我需要处于活动（按下）状态的按钮更改其背景。

背景图片也来自对象。

let backgroundImage = obj.background

如果我已经有了元素，我可以在CSS样式中使用它：

#mybutton1:active {background-image: url(mybutton1back.svg)}

...但是如何动态设置呢？

Answer 1

伪CSS选择器样式最好由CSS处理。因此，我决定尽力通过js将CSS样式附加到样式表中，而不是尝试通过js事件模仿:active css规则。

HTML：

<button id="btn">
something
</button>

CSS：

button {
  width: 50%;
  height: 50%;
  padding: 2em;
  display: block;
  margin: 0 auto;
  background: blue;
}

JS：

const button = document.getElementById('btn')
const imageUrl = 'https://www.goldenglobes.com/sites/default/files/styles/portrait_medium/public/people/cover_images/rami_malek_0601_mr._robot_13.jpg?itok=Q4NBBHxh';


const bgImageRule = `url(${imageUrl})`

const css = document.createElement("style");
css.type = "text/css";
css.innerHTML = `button#btn:active { background: ${bgImageRule}  }`;
document.head.appendChild(css);

PS：我在HTML中对按钮进行了硬编码，但这也适用于动态创建的元素。

这里是jsfiddle

如何在活动（按下）状态下为新创建的html按钮添加背景图片？

1 个答案: