javascript issue getElementById to modify CSS

Question

I have an issue about getElementById.
Here is the part of the javascript code that causes a problem:
var elmt = document.getElementById("cardSlotsJoueur");

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

I wanted to modify this (Css) :

#cardSlotsJoueur div {

But it actually modifies #cardSlotsJoueur {

Could you help me to find a way to modify the first one with getElementById ?

Thanks !

You can add an ID to the element you want to change, or you can add a CSS rule to a style sheet that uses an appropriate selector. — RobG
– RobG, Commented Jan 2, 2015 at 21:16

acontell · Accepted Answer · 2015-01-02 21:14:55Z

2

If you only want to modify the first div within the element with id=cardSlotsJoueur, you can use this:

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

answered Jan 2, 2015 at 21:14

acontell

6,9321 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfsq · Accepted Answer · 2015-01-02 21:10:38Z

1

To target #cardSlotsJoueur div it's better to use querySelector method which would retrieve children div element of the #cardSlotsJoueur container:

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

If you expect multiple div elements under the #cardSlotsJoueur then you need to get them all first

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

and then set backgroundImage to each in the for loop.

answered Jan 2, 2015 at 21:10

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

Johnrednex Over a year ago

Thanks for your rapidity ! It works. By the way do you know how to resize the picture that will be in the backgound ?

Paul Roub · Accepted Answer · 2015-01-02 21:11:42Z

1

You need to find div elements within #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')"; 
}

answered Jan 2, 2015 at 21:11

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

Comments

RobG · Accepted Answer · 2015-01-04 00:51:19Z

Probably the best way to do what you want is to use a class with the required styling and add it to the element. But as an alternative, you can add a rule to the last style sheet, e.g.

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

You can make it generic:

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

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

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

and call it like:

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

Collectives™ on Stack Overflow

javascript issue getElementById to modify CSS

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related