Dynamically creating CSS

[rburg]

Hi I've got a bit of a problem. For a group project, we are creating a web based game, which involves things moving around on screen etc. I have figured out how to use AJAX to dynamically update everything on the page as and when it changes in our database, but the problem is:

I need to be able to dynamically create CSS

This is because we are using the CSS to "place" each player at a set point on the screen e.g.

#ship_1{
position: absolute;
left: 200px;
top: 200px;
background-image: url('images/ship-blue.jpg');
background-repeat: no-repeat;
background-position: center center;
border: 1px solid black;

height: 35px;
width: 64px;

z-index: 5;
}

I need to add code like this everytime a new player logs in.

Thanks in advance for your help

[gits]

hi ...

you may set every style you want for example the following way:

// get a reference to the desired dom-node (think it as: your player)
var node = document.getElementById('id_of_your_player_node');
 
// set style - i.e. color
node.style.color = 'red';
 
// or set a style that uses a slightly different style-attribute-name that
// has then to be referred with the array-notation : background-color
node.style['background-color'] = 'blue';
 
// you may also use predefined 'style-classes'
node.className = 'your_css_class';
 
 

hope this helps and ...

kind regards