Question

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

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

我想修改此（Css）：

#cardSlotsJoueur div {

但实际上它会修改#cardSlotsJoueur {

你能帮我找到一种用getElementById修改第一个的方法吗？

谢谢！

Answer 1

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

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

Answer 2

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

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

如果您希望div下有多个#cardSlotsJoueur元素，那么您需要先将它们全部放入

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

然后将backgroundImage设置为for循环中的每一个。

Answer 3

您需要在div中找到#cardSlotsJoueur元素：

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 4

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

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

4 个答案: