Error in document.getElementById(id).style.background-position = "-200px -500px"?

Ghyslaine Crespe · Dec 25, 2004

Hello,

In my script, the line

document.getElementById(id).style.background-position = "-200px -500px";

fails !

So, how can I change the background-position value ?

Thanks, Denis

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style>
div.hr {
border: solid #0000FF;
display: inline;
height: 600px;
width: 300px;
background-image: url(plan_station.gif);
background-repeat: no-repeat;
background-position: -100px -400px;
margin: 0em 0 0em 0;
}

</style>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function goRight(id)
{
document.getElementById(id).style.height="100px";
document.getElementById(id).style.background-position = "-200px -500px";
}

</SCRIPT>
</HEAD>
<BODY>
<a href="#" onclick="goRight('myDiv')">right</a>
<DIV id="myDiv" class = "hr" ></DIV>
</BODY>
</HTML>

Andrew Poulos · Dec 25, 2004

Ghyslaine said:
Hello,

In my script, the line

document.getElementById(id).style.background-position = "-200px -500px";

[snip]

With hyphenated style properties you are usually meant to refer to them
in code by dropping the hyphen and capitalising the next word (the
intercapitalisation system). In your case, "background-position" becomes
"backgroundPosition"

Andrew Poulos

Michael Winter · Dec 25, 2004

On Sun, 26 Dec 2004 00:40:08 +0100, Ghyslaine Crespe

[snip]

So, how can I change the background-position value ?

Whilst background-position is the correct property name in CSS, it's an
illegal identifier in ECMAScript. You're looking for backgroundPosition.

[snip]

background-image: url(plan_station.gif);
background-repeat: no-repeat;
background-position: -100px -400px;

Be careful when specifying a background image without a background colour.
Make sure that the foreground content is still easily viewable if images
are disabled.

margin: 0em 0 0em 0;

That should be reduced to

margin: 0;

[snip]

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

The language attribute is deprecated and besides, specifying the
(required) type attribute makes it redundant.

function goRight(id)
{
document.getElementById(id).style.height="100px";
document.getElementById(id).style.background-position
= "-200px -500px";

It would be more efficient to save a reference to the element, rather than
look it up twice:

var style = document.getElementById(id).style;
style.height = '100px';
style.backgroundPosition = '-200px -500px';

Preferably, it would include feature detection. Something like

var obj, style;
if(document.getElementById && (obj = document.getElementById(id))
&& (style = obj.style))
{
style.height = '100px';
style.backgroundPosition = '-200px -500px';
}

[snip]

<a href="#" onclick="goRight('myDiv')">right</a>

If you don't cancel the click event here, the vertical position of the
document may change:

onclick="goRight('myDiv');return false;"

Hope that helps,
Mike

Merry Christmas

Ghyslaine Crespe · Dec 25, 2004

Yes, it helps me a lot. Thanks for all these clues!

Denis

Michael Winter said:
On Sun, 26 Dec 2004 00:40:08 +0100, Ghyslaine Crespe

[snip]

So, how can I change the background-position value ?

Click to expand...

Whilst background-position is the correct property name in CSS, it's an
illegal identifier in ECMAScript. You're looking for backgroundPosition.

[snip]

background-image: url(plan_station.gif);
background-repeat: no-repeat;
background-position: -100px -400px;

Click to expand...

Be careful when specifying a background image without a background colour.
Make sure that the foreground content is still easily viewable if images
are disabled.

margin: 0em 0 0em 0;

Click to expand...

That should be reduced to

margin: 0;

[snip]

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

Click to expand...

The language attribute is deprecated and besides, specifying the
(required) type attribute makes it redundant.

function goRight(id)
{
document.getElementById(id).style.height="100px";
document.getElementById(id).style.background-position
= "-200px -500px";

Click to expand...

It would be more efficient to save a reference to the element, rather than
look it up twice:

var style = document.getElementById(id).style;
style.height = '100px';
style.backgroundPosition = '-200px -500px';

Preferably, it would include feature detection. Something like

var obj, style;
if(document.getElementById && (obj = document.getElementById(id))
&& (style = obj.style))
{
style.height = '100px';
style.backgroundPosition = '-200px -500px';
}

[snip]

<a href="#" onclick="goRight('myDiv')">right</a>

Click to expand...

If you don't cancel the click event here, the vertical position of the
document may change:

onclick="goRight('myDiv');return false;"

Hope that helps,
Mike

Merry Christmas

Evertjan. · Dec 26, 2004

Ghyslaine Crespe wrote on 26 dec 2004 in comp.lang.javascript:

document.getElementById(id).style.background-position

document.getElementById(id).style.backgroundPosition

I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Please Help?	0	Jul 23, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Fading effect between play and play-over and pause and pause-over	0	Oct 16, 2021
Help with my responsive home page	2	Dec 14, 2022
Using CSS ID Tags to	2	Apr 21, 2020
I want to learn More Advanced Javascript for Game Development, but can't seem to be able to progress in my coding ability	0	Aug 27, 2024

Error in document.getElementById(id).style.background-position = "-200px -500px"?

Ghyslaine Crespe

Andrew Poulos

Michael Winter

Ghyslaine Crespe

Evertjan.

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads