Restrictions on style settings

[Claus Mygind]

I want to move some style setting into a javaScript function so I can make them variable but I get "invalid assignment left-hand side" error?

see my question at the bottom of this message.

It works fine when I stream it out in my html page like this:
<DIV
ID="popSearch"
STYLE="
position:absolu te;
visibility:hidd en;
background-color:#E4BF87;
border-style: ridge;
border-width: 5px;
border-color: orange;
z-index:99;"
>

The division is made visible via a on screen button which calls this js function:

function showPopSearch( ) {
if ( document.getEle mentById("popSe arch").style.vi sibility == "hidden" ) {
// document.getEle mentById("popSe arch").style.ba ckground-color = "#E4BF87";
// document.getEle mentById("popSe arch").style.bo rder-style = "ridge";
// document.getEle mentById("popSe arch").style.bo rder-width = "5px";
// document.getEle mentById("popSe arch").style.bo rder-color = "orange";
document.getEle mentById("popSe arch").style.z-index = "99";
document.getEle mentById("popSe arch").style.vi sibility = "visible";
document.getEle mentById("pBdat aSpan").style.o verflow = "auto";
showGetSearch() ;
}else{
document.getEle mentById("popSe arch").style.vi sibility = "hidden";
document.getEle mentById("pBdat aSpan").style.o verflow = "hidden";
}
}

function showGetSearch( ) {
var cHeight = "175";
var cWidth = "450";
var cLeft = parseInt((scree n.availWidth/2) - (cWidth/2));
var cTop = parseInt((scree n.availHeight/2) - (cHeight/2) - 50);
document.getEle mentById("popSe arch").style.le ft = cLeft + "px";
document.getEle mentById("popSe arch").style.to p = cTop + "px";
document.getEle mentById("popSe arch").style.he ight = cHeight + "px";
document.getEle mentById("popSe arch").style.wi dth = cWidth + "px";
}


Question: Why cannot these style parameters be removed from the <STYLE> tag and be placed in the js function?

Please note that when I move them to the js function I remove them from the <STYLE> tag inclusion so they are not duplicated!

document.getEle mentById("popSe arch").style.ba ckground-color = "#E4BF87";
document.getEle mentById("popSe arch").style.bo rder-style = "ridge";
document.getEle mentById("popSe arch").style.bo rder-width = "5px";
document.getEle mentById("popSe arch").style.bo rder-color = "orange";

it appears that only the following style settings work for me:
.visibility
.top
.left
.width
.height
.overflow

[hsriat]

In CSS, if its background-image, in JavaScript, its backgroundImage...

See, all your problem giving code lines contain a style property with a hyphen in it. Remove them and make the immediate next letters capital.

[Claus Mygind]

Thanks,

That did the trick as you knew it would

Claus

[hsriat]

Thanks,

That did the trick as you knew it would

Claus

I knew it would do the trick, but I'm still glad to know that the trick actually helped you.