By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,760 Members | 1,585 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,760 IT Pros & Developers. It's quick & easy.

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

P: n/a
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>
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Ghyslaine Crespe wrote:
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
Jul 23 '05 #2

P: n/a
On Sun, 26 Dec 2004 00:40:08 +0100, Ghyslaine Crespe
<gh**************@worldonline.fr> wrote:

[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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

P: n/a
Yes, it helps me a lot. Thanks for all these clues!

Denis

"Michael Winter" <M.******@blueyonder.co.invalid> a écrit dans le message de
news:opsjk97azvx13kvk@atlantis...
On Sun, 26 Dec 2004 00:40:08 +0100, Ghyslaine Crespe
<gh**************@worldonline.fr> wrote:

[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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #4

P: n/a
Ghyslaine Crespe wrote on 26 dec 2004 in comp.lang.javascript:
document.getElementById(id).style.background-position


document.getElementById(id).style.backgroundPositi on
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.