javascript 发出 getElementById 修改 CSS

Question

我有一个关于 getElementById 的问题。
这是导致问题的 javascript 代码部分：
var elmt = document.getElementById("cardSlotsJoueur");

elmt.style.backgroundImage = "url('images/backcard.png')";

我想修改这个（CSS）：

#cardSlotsJoueur div {

但它实际上修改了#cardSlotsJoueur {

你能帮我想办法用 getElementById 修改第一个吗？

谢谢！

Answer 1

要定位 #cardSlotsJoueur div，最好使用 querySelector 方法来检索 #cardSlotsJoueur 容器的子 div 元素：

var elmt = document.querySelector("#cardSlotsJoueur div");

如果您希望 #cardSlotsJoueur 下有多个 div 元素，那么您需要先获取它们

var elmt = document.querySelectorAll("#cardSlotsJoueur div");

然后在 for 循环中为每个设置 backgroundImage。

Answer 2

您需要在 #cardSlotsJoueur:

中找到 div 个元素

var elmt = document.getElementById("cardSlotsJoueur");
var divs = elmt.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++) { 
  divs[i].style.backgroundImage = "url('images/backcard.png')"; 
}

Answer 3

如果你只想修改id=cardSlotsJoueur的元素中的第一个div，你可以使用这个：

var elmt = document.getElementById("cardSlotsJoueur").getElementsByTagName("div")[0];

Answer 4

可能最好的方法是使用具有所需样式的 class 并将其添加到元素中。但作为替代方案，您可以将规则添加到最后一个样式 sheet，例如

function addBackground() {
  var sheets = document.styleSheets;

  // If there are no style sheets, add one
  if (!sheets.length) {
    document.head.appendChild(document.createElement('style'));
  }

  // The sheets collection is live, if a new sheet was needed, it's automatically a member
  sheets[sheets.length - 1].insertRule('#cardSlotsJoueur div{background-image:url("images/backcard.png")');
}

您可以将其设为通用：

function addRule(ruleText) {
  var sheets = document.styleSheets;

  if (!sheets.length) {
    document.head.appendChild(document.createElement('style'));
  }

  sheets[sheets.length - 1].insertRule(ruleText);
}

并这样称呼它：

addRule('#cardSlotsJoueur div{background-image:url("images/backcard.png")');

javascript 发出 getElementById 修改 CSS

javascript issue getElementById to modify CSS

javascript

css

getelementbyid