Div height and width not being set in javascript

Question

I am trying to set the width and height of a div in javascript but it is not being set. I have tried a lot but nothing is working. Here is what i have tried,

<div id="d1">asdasd</div>

<script>
  var d = document.getElementById("d1");
  d.style.width = "100px";
  d.style.height = "100px";
  d.style.cssText = 'border:1px solid black;'
</script>

Please check what is the problem!

No I have to do this in javascript. As i have to use values from js variables! — MJQ
– MJQ, Commented Nov 5, 2012 at 6:54

Rifky Niyas · Accepted Answer · 2021-10-29 18:07:16Z

6

I think d.style.cssText overwrites width and height properties

Try this:

var d = document.getElementById("d1");
d.style.width = "100px";
d.style.height = "100px";
d.style.cssText += 'border:1px solid black;'

edited Oct 29, 2021 at 18:07

Rifky Niyas

2,1061 gold badge15 silver badges29 bronze badges

answered Nov 5, 2012 at 6:54

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

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

1 Comment

MJQ Over a year ago

Even if i don't write that line it doesn't set the height and width!

slebetman · Accepted Answer · 2012-11-05 07:01:08Z

3

As karaxuna mentioned, your d.style.cssText is overwriting the width and height settings. Simply changing your code to either this:

var d = document.getElementById("d1");
d.style.width = "100px";
d.style.height = "100px";
d.style.border = '1px solid black';

or this:

var d = document.getElementById("d1");
d.style.cssText = 'border:1px solid black;'
d.style.width = "100px";
d.style.height = "100px";

works perfectly.

answered Nov 5, 2012 at 7:01

slebetman

115k19 gold badges147 silver badges180 bronze badges

Comments

Pranav · Accepted Answer · 2012-11-05 07:03:18Z

2

Your problem is with d.style.cssText = 'border:1px solid black;' . it is overriding the width and height set by JS .

Check this fiddle:-

http://jsfiddle.net/RZKnQ/1/

answered Nov 5, 2012 at 7:03

Pranav

8,9214 gold badges28 silver badges42 bronze badges

Comments

Dan Dascalescu · Accepted Answer · 2012-11-05 06:53:34Z

1

This works:

<div id="d1" style="border:1px solid black;">asdasd</div>
<script>
var d = document.getElementById("d1");
d.style.height = "200px";
</script>

http://jsfiddle.net/dandv/emnMb/4/

answered Nov 5, 2012 at 6:53

Dan Dascalescu

154k66 gold badges336 silver badges422 bronze badges

Comments

Rifky Niyas · Accepted Answer · 2021-10-29 17:44:29Z

1

An alternate would be to define a new style element in CSS and simply set d.className to that CSS element.

I guess

d.style.cssText

is problem

edited Oct 29, 2021 at 17:44

Rifky Niyas

2,1061 gold badge15 silver badges29 bronze badges

answered Nov 5, 2012 at 6:56

CKmum

6416 silver badges17 bronze badges

Comments

Chinmayee G · Accepted Answer · 2012-11-05 06:57:56Z

0

Change sequence of your JS statements it will work i.e.

<script>
    var d = document.getElementById("d1");
    d.style.cssText = 'border:1px solid black;'
    d.style.width = "100px";
    d.style.height = "100px";
</script>

Better put width, height properties in style attribute only. i.e.

d.style.cssText = 'border:1px solid black; width:100px; height:100px'

or in CSS class

answered Nov 5, 2012 at 6:57

Chinmayee G

8,1172 gold badges34 silver badges41 bronze badges

Comments

specialscope · Accepted Answer · 2012-11-05 07:00:12Z

0

d.style.cssText = 'border:1px solid black;'
d.style.float="left";
d.style.width = "100px";
d.style.height = "100px";

You neeed to use float:left attribute.

answered Nov 5, 2012 at 7:00

specialscope

4,2383 gold badges26 silver badges23 bronze badges

Comments

polin · Accepted Answer · 2012-11-05 07:01:35Z

0

I don't know what your problem is but I've used this and this worked

    function fnc1()
{
    document.getElementById("d1").style.width="100px";
    document.getElementById("d1").style.height="100px";
    document.getElementById("d1").style.backgroundColor="red";
}

answered Nov 5, 2012 at 7:01

polin

2,8853 gold badges17 silver badges20 bronze badges

Comments

Prasad · Accepted Answer · 2012-11-05 07:02:33Z

0

HTML:

<div id="d1">asdasd</div>

Javascript

document.getElementById('d1').style.height = 90+'px';

working demo here ( works fine with chrome, din't check with other browsers )

answered Nov 5, 2012 at 7:02

Prasad

7012 gold badges20 silver badges38 bronze badges

Collectives™ on Stack Overflow

Div height and width not being set in javascript

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related