I want to do the following:

<div id="theDiv" style="width: aJavascriptVariableOrFunctionCallToGetValue">TESING</div>

I don't want to use, elsewhere in the code,

document.getElementById('theDiv').style.width = someValue;

I actually want that div, when it first appears, to have a width set, inline, by either a JavaScript variable or by way of a call to a JavaScript function.

How can I do this?

I want to do the following:

<div id="theDiv" style="width: aJavascriptVariableOrFunctionCallToGetValue">TESING</div>

I don't want to use, elsewhere in the code,

document.getElementById('theDiv').style.width = someValue;

I actually want that div, when it first appears, to have a width set, inline, by either a JavaScript variable or by way of a call to a JavaScript function.

How can I do this?

• javascript
• css

• Why do you want to do this? Perhaps you are looking for a templating engine handlebarsjs. – Steve Commented Jan 22, 2014 at 17:50
• "I don't want to use, elsewhere in the code," Why not? – j08691 Commented Jan 22, 2014 at 17:51
• 1 I am afraid you cannot do that without that JS statement you don't want to use. – Erlik Commented Jan 22, 2014 at 17:51
• 1 You can generate the html with JavaScript, this way you can use your JS variables when you are making a new element... – Daew Commented Jan 22, 2014 at 17:54
• If you need the style applied immediately, you can embed a script immediately following your HTML markup and then you won't have the flash of unstyled content I'm guessing you want to avoid. – Harvey A. Ramer Commented Jan 22, 2014 at 17:56

5 Answers 5

This is impossible to do the way you see this.

Every time the variable changes, you need to update the style of that particular object:

var theDiv = document.getElementById("theDiv");
document.getElementById('theDiv').style.width = someValue;

I really don't understand what you mean that when it first appears you want it's width to be set to certain width - why do you want to do that inline? Why can't you just set the width in your Javascript? What's preventing you from doing that? Especially if you want to do it just once and don't want to change it dynamically.

If you want to link the width of the div to a variable, look at frameworks like Backbone or EmberJS. You can then define a renderer that changes the width when the variable changes.

The only way to get JavaScript to run when an element first appears is with an onload event handler. And onload events only work on a few specific elements, like body, script or img.

Here is how you could make it work in your case, with a img tag:

<div id="theDiv">
TESING
<img style="display:none;" src="tinyImage.jpg" onload="this.parentNode.style.width='100px';"/>
</div>

Honestly, I don't see this as a good practice, and I would remend to just be patient, and set the width later in a script.

Live demo: http://jsfiddle/HKW6b/

I'm using React, and this syntax worked for me:

<div id="theDiv" style={`width: ${aJavascriptVariable} %`}>TESING'</div>

You cannot do it like that. There are other ways to achieve what you want, though.

• Server side processing, specially if the technology you use supports templating. You can manipulate the html value before sending it to the client;

• jQuery may be something to consider. Simply fetch the element and use its API. Example:

$("#theDiv").width(aJavascriptVariableOrFunctionCallToGetValue);

This small piece of code does exactly what you want. It is not written inside the element itself, and it is about equivalent to the sample you provided, but again, it's something to consider should you have to do more plex operations on the DOM later on.

If you want to execute that piece of code only once, and after the page is ready, you can do it like this:

var div = $("#theDiv");
div.ready(function () {
    div.width(aJavascriptVariableOrFunctionCallToGetValue);
});

The solution for this issue allowed me to set the proper width of the div immediately, asymptotically approaching inlined-javascript as possible, as per one of the ments above suggested:

"If you need the style applied immediately, you can embed a script immediately following your HTML markup and then you won't have the flash of unstyled content I'm guessing you want to avoid. – Harvey A. Ramer"

This solved the 'slow server' => FOUC problem. I added a 'script' tag immediately after the div tag to set the div to the window.innerWidth, problem solved.

From what I've seen, this approach is the earliest/soonest/fastest way to use javascript to set a CSS style attribute -- and it avoids having to code up an 'onload' handler.

The problem with 'onload' handlers being used to set UI style attributes on the page is -- the onload Javascript handler function can grow...and grow...and grow over time over the project's lifespan and you eventually are forced to clean out the onload handler. Best approach is to never use an onload handler that sets styles in the first place.