certain composed attributes

[nacho]

var message=document.createElement('div');
message.style.position="absolute";
message.style.width="200";
message.style.height="70";
message.style.left=200;
message.style.top=50;
message.innerHTML='hello';
document.getElementsByTagName('body').item(0).appendChild(mensaje);
In this code I show a "hello" message.
I am not able, however, to edit certain composed attributes.

message.style.background-color="#0066FF";
message.style.z-index=2;
This two sentences give error.
How can I bypass the problem?
Thanks a lot.

[BSolveIT]

Hi Nacho

Well, you've got a couple of choices I guess:

1) Publicly declare 'message' so that it can be referenced outside of the function that created it. You could do that simple by declaring it before the start of the function.

e.g.

<SCRIPT LANGUAGE=javascript>
<!--
var message=document.createElement('div');
function creatediv()
{
message.style.position="absolute";
message.style.width=200;
message.style.height=70;
message.style.left=200;
message.style.top=50;
message.innerHTML='hello';
document.getElementsByTagName('body').item(0).appendChild(message);
}
//-->
</SCRIPT>

or (and this would be my preference)

2) Assign an id to the div so that you can refence it from anywhere.

e.g.

<SCRIPT LANGUAGE=javascript>
<!--
function creatediv()
{
var message=document.createElement('div');
message.style.position="absolute";
message.style.width=200;
message.style.height=70;
message.style.left=200;
message.style.top=50;
message.innerHTML='hello';
message.id = "mydiv";
document.getElementsByTagName('body').item(0).appendChild(message);
}
//-->
</SCRIPT>


Then, when you want to reference the div, use it's id 'mydiv'.

Lastly, the code you pasted above for changing the background colour and the z-Index is wrong. If you were using my preferred solution above (2), it would be:

mydiv.style.backgroundColor = "#0066FF"
mydiv.style.zIndex="2"

That pretty much covers it.

8-|