javascript - 如何为处于事件(按下)状态的新创建的 html 按钮添加背景图像？

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 事件模仿 :active css 规则，我决定最好通过 js 将 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