469,279 Members | 2,250 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,279 developers. It's quick & easy.

[SOLVED] how to document.getElementById().style.padding-left ?

1
I need to change the style of an element changing its padding-left property (got it in firefox but IE is a different battle..). I can use document.getElementById().style.XX
to everything i need, except with padding-left, as it is separated by a ' - ' and it is not correct to use it as it was supposed to:

document.getElementById('el').style.padding-left = '5px'

will throw 'invalid assignment left-hand side', as expected..

Any help please?

[SOLVED]

Apparently the property turns into paddingLeft (or paddingTop, paddingBottom, paddingRight) so it can be used as expected:

document.getElementById('el').style.paddingLeft = '5px'
document.getElementById('el').style.paddingTop = '5px'
document.getElementById('el').style.paddingRight = '5px'
document.getElementById('el').style.paddingBottom = '5px'
Mar 25 '08 #1
2 13413
hsriat
1,654 Expert 1GB
I need to change the style of an element changing its padding-left property (got it in firefox but IE is a different battle..). I can use document.getElementById().style.XX
to everything i need, except with padding-left, as it is separated by a ' - ' and it is not correct to use it as it was supposed to:

document.getElementById('el').style.padding-left = '5px'

will throw 'invalid assignment left-hand side', as expected..

Any help please?
For that use paddingLeft.

In general, anything of style containing a hyphen ( - ) will work for JavaScript when hyphen is removed and first letter of the second word is made capital.

eg.
background-image -> backgroundImage
border-top -> borderTop


[EDIT]
Glad to know you solved it.
Mar 25 '08 #2
mrhoo
428 256MB
Converting between css syntax('border-top-width') and javascript property names ('borderTopWidth') is a common webpage chore.
The values you are working with are always strings, so a String method to do the conversion may be appropriate:

Expand|Select|Wrap|Line Numbers
  1.  
  2. String.prototype.dash= function(boo){
  3.     var s= this;
  4.     if(/^[A-Z]+$/.test(s) || /\-/.test(s)) s = s.toLowerCase();
  5.     if(boo=== true ){
  6.         if(/[a-z][A-Z]/.test(s)){
  7.             s= s.replace(/[A-Z]/g, function(w){
  8.                 return "-" + w.toLowerCase();
  9.             })
  10.         }
  11.     }
  12.     else if(/\-/.test(s)){
  13.         s= s.replace(/\-[a-z]/g, function(w){
  14.             return w.charAt(1).toUpperCase() + w.substring(2);
  15.         })
  16.     }
  17.     return s;
  18. }
  19.  
// pass the argument 'true' for css (hyphen-ated) , leave it out or pass 'false' to return camelCase.
Mar 25 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Chris | last post: by
1 post views Thread by Jaap | last post: by
7 posts views Thread by PaulB | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.