Setting DIV width and height in JavaScript

Question

I have a div with id  div register   I want to set its width dynamically in JavaScript   I am using this following code   getElementById  div register   style width 500    but this line of code isn t working   I also tried using the units px like the following  still no luck   getElementById  div register   style width  500px     and  getElementById  div register   style width  500     and  getElementById  div register   style width 500px    but none of this code is working for me   I don t know what s going wrong   I am using Mozilla Firefox   EDIT   lt html gt       lt head gt           lt title gt Untitled lt  title gt           lt script gt              function show update profile                     document getElementById  black fade   style display  block                     document getElementById   div register   style left   window innerWidth -500  20                  document getElementById  div register   style height   500px                   document getElementById  div register   style width   500px                     alert  kutta                      document getElementById  div register   style display  block                   document getElementById  register flag   value  1                  document getElementById  physical flag   value  0                  document getElementById  cultural flag   value  0                  document getElementById  professional flag   value  0                  document getElementById  lifestyle flag   value  0                  document getElementById  hobby flag   value  0                    alert window innerWidth                          lt  script gt           lt style gt               white content                   display none                         lt  style gt       lt  head gt       lt body gt           lt div id  main  gt               lt input type  button  onclick  javascript show update profile     id  show  name  show  value  show   gt           lt  div gt           lt div id  div register  gt               lt table cellpadding  0  cellspacing  0  border  0  gt                   lt tr gt                       lt td gt                        welcome                       lt  td gt                   lt  tr gt               lt  table gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

Be careful of span    myspan styles width  100px  doesn t want to work   Change the span to a div

User · Answer

If you remove the javascript  prefix and remove the parts for the unknown ids like  black fade  from your javascript code  this should work in firefox  Condensed example    lt html gt       lt head gt           lt script type  text javascript  gt              function show update profile                    document getElementById  div register   style height   500px                  document getElementById  div register   style width   500px                  document getElementById  div register   style display  block                  return true                        lt  script gt           lt style gt                just to show dimensions of div                div register                              background-color   cfc                        lt  style gt       lt  head gt       lt body gt           lt div id  main  gt               lt input type  button  onclick  show update profile     value  show   gt           lt  div gt           lt div id  div register  gt               lt table gt                   lt tr gt                      lt td gt                       welcome                      lt  td gt                   lt  tr gt               lt  table gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

These are several ways to apply style to an element  Try any one of the examples below   1  document getElementById  div register   className    wide        CSS     wide width 500px   2  document getElementById  div register   setAttribute  class   wide    3  document getElementById  div register   style width    500px

User · Answer

Fix the typos in your code   document  is spelled wrong on lines 3  amp  4 of your function  and change the onclick event handler to read  onclick  show update profile    and then you ll be fine   You should really follow jmort s advice and simply set up 2 css classes that you switch between in javascript -- it would make your life a lot easier and save yourself from all the extra typing   The typos you ve committed are a perfect example of why this is the better approach   For brownie points  you should also check out element addEventListener for assigning event handlers to your elements

User · Answer

The onclick attribute of a button takes a string of JavaScript  not an href like you provided  Just remove the  javascript   part

User · Answer

The properties you re using may not work in Firefox  Chrome  and other non-IE browsers  To make this work in all browsers  I also suggest adding the following   document getElementById  div register   setAttribute  style   width 500px      For cross-compatibility  you will still need to use the property  Order may also matter  For instance  in my code  when setting style properties with JavaScript  I set the style attribute first  then I set the properties   document getElementById  mydiv   setAttribute  style   display block cursor pointer cursor hand     document getElementById  mydiv   style display    block   document getElementById  mydiv   style cursor    hand     Thus  the most cross-browser compatible example for you would be   document getElementById  div register   setAttribute  style   display block width 500px    document getElementById  div register   style width  500px     I also want to point out that a much easier method of managing styles is to use a CSS class selector and put your styles in external CSS files  Not only will your code be much more maintainable  but you ll actually make friends with your Web designers   document getElementById  div register   setAttribute  class   wide      wide       display block      width 500px      hide       display none      narrow       display block      width 100px      Now  I can easily just add and remove a class attribute  one single property  instead of calling multiple properties  In addition  when your Web designer wants to change the definition of what it means to be wide  he or she does not need to go poking around in your beautifully maintained JavaScript code  Your JavaScript code remains untouched  yet the theme of your application can be easily customized   This technique follows the rule of separating your content  HTML  from your behavior  JavaScript   and your presentation  CSS

[javascript] Setting DIV width and height in JavaScript

Examples related to javascript