Setting several styles within one javascript function

[Spartanicus]

How should the styles of various elements be manipulated with one
function? The following doesn't work:

function panel() {
document.getElementById('panel').style.display='hidden';
document.getElementById('content').style.marginLeft='30px';
}

Apologies for requesting a shortcut instead of learning javascript
proper, I don't use it enough to make that worthwhile.

 

[Dylan Parry]

Using a pointed stick and pebbles, Spartanicus scraped:

function panel() {
document.getElementById('panel').style.display='hidden';
document.getElementById('content').style.marginLeft='30px';
}

I had problems with a similar function a while back. IIRC the problem
was caused by having the /wrong kind of quotes/ and changing them to "s
made all the difference. I might be wrong, of course

 

[Michael Winter]

Using a pointed stick and pebbles, Spartanicus scraped:

The value, hidden, doesn't apply to the display property, so this is a
CSS issue, not one of scripting. So, which is it: display/none, or
visibility/hidden?

A well-written script will be robust, and test its environment before
using any features. In this instance, though, it might be better to
prepare beforehand:

/* Establish if the getElementById method is implemented by the
* host. If not, create a replacement so that the method can be
* called successfully, even if the result will never be viable.
*
* Support for older, obscure object models can be added here.
* See the clj FAQ notes with regard to 'IDed Element Retrieval'.
*/
if(!document.getElementById) {
(document.getElementById = function() {
return null;
}).notViable = true;
}

function setStyle(element, property, value) {
(element.style || element)[property] = value;
}

function panel() {
var content, panel;

if((panel = document.getElementById('panel'))
&& (content = document.getElementById('content')))
{
setStyle(panel, 'display', 'none');
setStyle(content, 'marginLeft', '30px');
}
}

This is not necessarily the best alternative. It may depend on what the
rest of the code does.

[snip]

I had problems with a similar function a while back. IIRC the problem
was caused by having the /wrong kind of quotes/ and changing them to "s
made all the difference. I might be wrong, of course

Probably. There is no difference between single and double quotes in
ECMAScript.

Mike

 

[Spartanicus]

The value, hidden, doesn't apply to the display property

Oops, the result of simplifying the code for the post, I inserted the
wrong code.

A minimized test case that closely resembles what I'm actually trying to
do is: http://homepage.ntlworld.com/spartanicus/temp.htm

This "works" if I comment out the second statements, if I leave them in
it fails and produces runtime errors.

A well-written script will be robust, and test its environment before
using any features.

I'm not skilled enough to understand feature detection, or to write
elegant javascript code. All my javascript is used for optional fluff
only, no harm done if it doesn't work.

 

[Jonathan N. Little]

Oops, the result of simplifying the code for the post, I inserted the
wrong code.

A minimized test case that closely resembles what I'm actually trying to
do is: http://homepage.ntlworld.com/spartanicus/temp.htm

This "works" if I comment out the second statements, if I leave them in
it fails and produces runtime errors.




I'm not skilled enough to understand feature detection, or to write
elegant javascript code. All my javascript is used for optional fluff
only, no harm done if it doesn't work.

JavaScript code block on more than one line should be contained in braces
<your code>
function panel() {
if (document.getElementById('panel').style.display == 'none')
document.getElementById('panel').style.display='block';
document.getElementById('content').style.marginLeft='14em';
else {
document.getElementById('panel').style.display='none';
document.getElementById('content').style.marginLeft='1em';
}
}
</your code>

<fixed code>
function panel() {
if (document.getElementById('panel').style.display == 'none'){
document.getElementById('panel').style.display='block';
document.getElementById('content').style.marginLeft='14em';
}
else {
document.getElementById('panel').style.display='none';
document.getElementById('content').style.marginLeft='1em';
}
}

</fixed code>


But as Michael said this in not very robust code!