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

<html>
    <head>
        <title>Untitled</title>
        <script>
            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);
            }
        </script>
        <style>
            .white_content {
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/>
        </div>
        <div id="div_register">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                      welcome 
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

Have you tried to setting the width after the onload event has occured? — Cyclonecode
– Cyclonecode, Commented Apr 12, 2012 at 6:04
Did you check, that div_register is the right id of your element? Maybe give us some html, too... style.width="500px"; should be right. — powerMicha
– powerMicha, Commented Apr 12, 2012 at 6:05
i have set document.getElementById('div_register').style.display='block', and then set document.getElementById('div_regsiter').style.width='500px'; — Saswat
– Saswat, Commented Apr 12, 2012 at 6:05
For what its worth, you have typos in the word "document" in lines 3 & 4 of your function...which would most definitely keep it from working. — Daniel Szabo
– Daniel Szabo, Commented Apr 12, 2012 at 6:42
use onclick="show_update_profile()" instead of onclick="javascript:show_update_profile()" — Tejasva Dhyani
– Tejasva Dhyani, Commented Apr 12, 2012 at 6:43

Vaibhav Jain · Accepted Answer · 2015-07-08 10:54:51Z

300

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).

edited Jul 8, 2015 at 10:54

Vaibhav Jain

2,44330 silver badges40 bronze badges

answered Apr 12, 2012 at 6:05

jamesmortensen

34.2k11 gold badges102 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

powerMicha Over a year ago

Won't this override all other style attributes? As mentioned in a comment to the question, display: block was also set.

jamesmortensen Over a year ago

Set everything at once when using the style attribute. In my example from my own tested and working code, I put display:block;cursor:pointer;cursor:hand all in the same setAttribute call. If you want your life to be easier, use a progressive JavaScript library like jQuery. The only reason I used raw JavaScript in my code is because it was for embed code on client websites, so the actual environments would differ from site to site, and the easiest way to avoid library conflicts in the wild is to just not use them.

jamesmortensen Over a year ago

I added another example that uses class attributes. This technique follows the rule of separating your content (HTML) from your behavior (JavaScript), and your presentation (CSS). It also abstracts away the actual details of the styling by giving it an easy-to-work-with className.

Daniel Szabo Over a year ago

@jmort: +1. But just in the name of accuracy, Chrome/FireFox/Safari all support the manipulation of the attributes in question (ex: element.style.height, element.style.width, etc.)

jamesmortensen Over a year ago

Hmmm, I know that in my own code, to get it to play nice with IE7, I had to follow some very specific steps that were discovered through very painful trial and error. It might be that IE7 wouldn't work properly with setAttribute... I don't remember exactly, so I'll leave this as an exercise for the reader and will remove the part about chrome/FF, etc. I know the code works, even if I might not be explaining it correctly. :)

|

jamesmortensen · Accepted Answer · 2012-04-15 19:26:55Z

25

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';

edited Apr 15, 2012 at 19:26

jamesmortensen

34.2k11 gold badges102 silver badges124 bronze badges

answered Apr 12, 2012 at 8:17

Valli69

10k6 gold badges27 silver badges29 bronze badges

Comments

Daniel Szabo · Accepted Answer · 2021-05-26 13:39:00Z

2

Fix the typos in your code (document is spelled wrong on lines 3 & 4 of your function, and change the onclick event handler to read: onclick="show_update_profile()" and you'll be fine. @jmort's advice is good - simply set up 2 css classes that you switch between in javascript - it'll make things easier.

You might also check out element.addEventListener for assigning event handlers to your elements.

edited May 26, 2021 at 13:39

answered Apr 12, 2012 at 7:01

Daniel Szabo

7,2817 gold badges52 silver badges70 bronze badges

Comments

jpsimons · Accepted Answer · 2012-04-12 06:28:02Z

0

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

answered Apr 12, 2012 at 6:28

jpsimons

28.2k3 gold badges39 silver badges45 bronze badges

Comments

powerMicha · Accepted Answer · 2012-04-12 06:50:34Z

0

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:

<html>
    <head>
        <script type="text/javascript">
            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;
           }
        </script>
        <style>
           /* just to show dimensions of div */
           #div_register
           {
                background-color: #cfc;
           }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="show_update_profile();" value="show"/>
        </div>
        <div id="div_register">
            <table>
                <tr>
                   <td>
                     welcome 
                   </td>
                </tr>
            </table>
        </div>
    </body>
</html>

answered Apr 12, 2012 at 6:50

powerMicha

2,7731 gold badge25 silver badges31 bronze badges

4 Comments

jamesmortensen Over a year ago

+1 on removing the "javascript:". That is an outdated construct from the long-gone days of Web 1.0.

powerMicha Over a year ago

Then please add it to your example, otherwise the script will fail - btw: Do you know the Firebug plugin for Firefox? This will help you a lot

Saswat Over a year ago

actualy there was nothing wrong in my script.........becaquse i was using a pop up box....that was offtopic, because my script worked well all along, using javascript: it worked all good, may be its outdated bt this wasnt an error...the problem was with updating the width dynamicaly...and jmort's solution helped me outcome the solution

powerMicha Over a year ago

Sure. I just wanted to point out, that these parts were missing in the example, which leads to other problems. So everthing is fine now

Andy B · Accepted Answer · 2015-09-11 14:49:56Z

0

Be careful of span!

myspan.styles.width='100px' doesn't want to work.

Change the span to a div.

answered Sep 11, 2015 at 14:49

Andy B

6298 silver badges15 bronze badges

4 Comments

Daniel T. Over a year ago

This is because span is an inline element by default, and therefore won't obey any sizing set on it. Changing its CSS to display: block, display: flex, or display: inline-block will cause it to work properly just like a div (a block element by default).

Vince Bowdren Over a year ago

The question never mentioned a span, and no answer suggested using one either. I don't see how this answer helps at all.

Andy B Over a year ago

Weird, this was a year ago so not sure why either!! ^_^

RiZKiT Over a year ago

And change styles.width to style.width. :)

MD SHAYON · Accepted Answer · 2021-04-11 22:33:43Z

-3

You have to use document. The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content,

know more

document.getElementById('div_register').style.width='500px';

answered Apr 11, 2021 at 22:33

MD SHAYON

8,11156 silver badges43 bronze badges

Collectives™ on Stack Overflow

Setting DIV width and height in JavaScript

7 Answers 7

7 Comments

Comments

Comments

Comments

4 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

Comments

Comments

Comments

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related