javascript問題getElementById修改CSS

我有一個關於getElementById的問題。
這裏是JavaScript代碼的一部分，導致了一個問題：
var elmt = document.getElementById("cardSlotsJoueur");javascript問題getElementById修改CSS

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

我想修改此（CSS）：

#cardSlotsJoueur div {

但實際修改#cardSlotsJoueur {

你能幫我找到一種方法來修改第一個getElementById？

謝謝！

來源

2015-01-02 Johnrednex

您可以將ID添加到您想要更改的元素，也可以添加CSS規則轉換爲使用適當選擇器的樣式表。 – RobG

如果你只希望修改與ID = cardSlotsJoueur該元素中的第一個div，你可以使用這個：

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

來源

2015-01-02 21:14:55 acontell

要定位#cardSlotsJoueur div它更好地使用querySelector方法，將檢索孩子div的，#cardSlotsJoueur容器的元素：如果您預計下#cardSlotsJoueur多個div元素，那麼你需要把他們都弄到第一

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

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

然後將backgroundImage設置爲for循環中的每一個。

來源

2015-01-02 21:10:38 dfsq

感謝您的迅速！有用。順便說一下，你知道如何調整背景圖片的大小嗎？ – Johnrednex

你需要內#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')"; 
}

來源

2015-01-02 21:11:42

可能做你想做的事情的最好方法是使用具有所需樣式的類並將其添加到元素中。但是，作爲替代方案，您可以將規則添加到最後的樣式表中，例如

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")');

來源

2015-01-04 00:51:19 RobG

javascript問題getElementById修改CSS

回答

相關問題