Register  |  Login

Question Details    

   Question

Time: 18:33 - Sep 13, 2006     Asked by: jgivoni      Status: Answered      Points: 75   

How do I change the style of an element in javascript, when the style attribute has a hyphen?

For example, imagine I have an element like this:
<div id="test" style="width: 100px; border-top: 1px solid black"/>

Normally I can change the style dynamically like this:
document.getElementById("test").style.width = "200px";

But, similarly, this doesn't work:
document.getElementById("test").style.border-top = "2px solid green";

Apparantly, the hyphen (-) in the style attribute (border-top) is causing trouble (being interpreted as a minus).
So what is the correct syntax in this case?

Thanks,
Jakob

Ask a New Question

Become a Quomon Expert

Current Categories

 

Other Questions Needing Answers


   

Answer Discussion
Answer Discussion
Answer Summaries
Answer Summary
 
Hi Jakob,

Try this
document.getElementById("test").style: border-top: 2px solid green;

Regards,
Sarbjit

Expert:

multani.sarbjit

Date:

Sep 14, 2006

Time:

07:18

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Hi jakob,
"borderTop" is the right way to refer to that property

document.getElementById("test").style.borderTop = "2px solid green";

/Anpanman

Expert:

Anpanman

Date:

Sep 14, 2006

Time:

09:18

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Anpanman, you're right. Quite simple!

Expert:

jgivoni

Date:

Sep 14, 2006

Time:

14:04

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Jakob,

As Anpanman points out, dropping the hyphen in border-top will give you the desired results. This is carried over for all of the hyphenated styles:
background-color = backgroundColor
font-weight = fontWeight
margin-top = marginTop
etc.

I've also found that case is important to some of the browsers with strict interpretation, so make sure the second "word" in the attribute is capitalized.

Something to look at that really helps with javascript (as well as other things HTML) is the Visibone charts found at http://www.visibone.com. I've got the "Card Collection" book, and there isn't a day that I don't look at it to find something I'm trying to resolve.

I hope this helps, too...

Expert:

rcastagna

Date:

Sep 14, 2006

Time:

14:11

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Question Answered

This question has been answered, and points have been rewarded to the following experts:

Anpanman: 75

You're welcome however to comment or give additional information or if you wish, you have the ability to write an Answer Summary for this question by clicking on the "Answer Summaries" Tab.


Skip the hyphen and capitalize the next letter; i.e.:

element.style.borderTop = "2px solid green"

Click here to see the Answer Discussion that preceded this summary.

Expert:

jgivoni

Date:

Sep 14, 2006

Time:

14:06

 
 

Login to rate this summary: Good  |  Bad

Respond to this question:

New User

  Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:


Forgotten Password

 

New User

  Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:


Forgotten Password

   

"Psst, Quomon is a great site. Pass it on."     Tell a Friend  |   Link To Us  |   Save to Delicious  |   Digg! Digg it


All Questions


Language Options

English:

www.quomon.com

Español:

www.quomon.es

Quomon Blog

blog.quomon.com

Sponsors

Questions and Answers Software
Real Estate Postcards
Marketing Fulfillment