Changing CSS element

Question

I have a div object with a property of width = 800. I want to assign the width of this div object to another div object.

<div id="object1" style="width: 800px;"></div>

<div id="object2"></div>

So as I'm coding on my javascript.js file, I tried to use the clientWidth method but didn't work.

var obj1 = document.getElementById("object1");
var obj2 = document.getElementById("object2");

obj2.style.width = obj1.clientWidth;

I've also tried using obj1.style.width but didn't work either. How do I change the properties of these objects by using another object's properties?

Change it to: obj2.style.width = obj1.clientWidth + 'px';

michelgotta
– michelgotta

2016-12-02 22:17:09 +00:00
Commented Dec 2, 2016 at 22:17 — michelgotta
– michelgotta, Commented Dec 2, 2016 at 22:17

michelgotta · Accepted Answer · 2016-12-02 22:20:39Z

3

obj1.clientWidth tells you the width in pixels but returns an integer. For the obj2.style.width you need to define if it's 'px', '%', 'em'. obj2.style.width expects a string like "1200px".

Change your code obj2.style.width = obj1.clientWidth + 'px'; to add the type of value to pixels.

answered Dec 2, 2016 at 22:20

michelgotta

1,0018 silver badges11 bronze badges

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

Comments

Kyle Baker · Accepted Answer · 2016-12-02 22:18:54Z

2

You need to say 'px' of '%'. It has to be equivalent to the CSS string.

answered Dec 2, 2016 at 22:18

Kyle Baker

3,7202 gold badges28 silver badges36 bronze badges

2 Comments

Zulu Over a year ago

Thanks everyone! the +"px" worked like a charm! However, oddly enough, it only worked for clientWidth and not style.width

Kyle Baker Over a year ago

@Zulu: weird. What browser? I confirmed it in chrome in my console dynamically right on this site.

Christos · Accepted Answer · 2016-12-02 22:18:18Z

1

You have missed to specify the px, em or %

var obj1 = document.getElementById("object1");
var obj2 = document.getElementById("object2");

obj2.style.width = obj1.clientWidth+"px";
console.log(obj2.style.width)

<div id="object1" style="width: 800px;"></div>

<div id="object2"></div>

answered Dec 2, 2016 at 22:18

Christos

54.1k9 gold badges82 silver badges114 bronze badges

Comments

jafarbtech · Accepted Answer · 2016-12-02 22:20:37Z

1

Use obj2.style.width = obj1.clientWidth+"px"; or obj2.style.width = obj1.style.width;. Both of them works fine for your case.

var obj1 = document.getElementById("object1");
var obj2 = document.getElementById("object2");

obj2.style.width = obj1.style.width;
//obj2.style.width = obj1.clientWidth+"px";

div{
  height:50px;
  background:red;
  display:inline-block;
  margin-bottom:10px;
  }

<div id="object1" style="width: 800px;"></div>

<div id="object2"></div>
So as I'm coding on my javascript.js file, I tried to use the clientWidth method but didn't work.

answered Dec 2, 2016 at 22:20

jafarbtech

7,0551 gold badge41 silver badges60 bronze badges

Collectives™ on Stack Overflow

Changing CSS element

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related