How to use a javascript value inside html style property value

Question

I have created some div(s) on a page. Depending on the browser (or may be any other settings) I want to change the width of these div(s).

Now, if I embed style=" blah blah blah...; width:200px" inside div tag, its ok. But I want this 200px to be, say, 220 sometime or 230 or 240 other times. So what I want now to calculate my required width in javascript, put it in a variable and then insert it as width property value like in &{}...

If I am clear is this possible in this manner, if yes how.

Jacob Relkin · Accepted Answer · 2010-09-12 08:15:45Z

2

You can set CSS properties on DOM elements in JavaScript:

Say you had a div with an id of someDiv, you could use the following JavaScript to change its width:

window.onload = function() {
   var newWidth = 220;
   document.getElementById('someDiv').style.width = newWidth + 'px';
};

edited Sep 12, 2010 at 8:15

answered Sep 12, 2010 at 6:17

Jacob Relkin

163k34 gold badges351 silver badges321 bronze badges

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

3 Comments

Felix Kling Over a year ago

Important to note is that CSS properties with dashes -, like background-color, have to be written camle-cased, like backgroundColor.

Rahul Utb Over a year ago

ok right. But this way if I call getElementById before the page is loaded, ie the <body> is complete, is gives error Error: document.getElementById("someDiv") is null

Rahul Utb Over a year ago

Thanks, this solved my problem for now. But at the same time raised few queries in my mind. 1 - Isn't that possible putting javascript values as javascript entity inside html tag attribute, I mean the way I wished. 2 - Can you suggest me some good resource on net where I can read and understand DOM & its level 1, 2 and 3. DOM features compatibility with browser's.

Collectives™ on Stack Overflow

How to use a javascript value inside html style property value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related