CSS Forum

**philmetz** · 11-28-2009, 09:15 AM

I got a javascript function (width()) that returns an integer value. How can I use it in a css style for a div width:

Code:

 <div style="background-color:#24464F; position:absolute; top:0; left:0; width:"width()"px; height:350px;">
    	<p>Hello World2 </p>
    </div>

**tripy** · 11-28-2009, 09:20 AM

You can not.
Css don't allow you to do that.
But you can alter a css value from javascript:

Code:

elm=document.getElementById('someElment')
elm.style.width=width()+"px"

**philmetz** · 11-28-2009, 09:33 AM

and that is done how:

Code:

....
	<script type="text/javascript"> 
        function width(id) 
        { 
            var width = document.body.clientWidth;
            elm=document.getElementById(id)
			elm.style.width=document.body.clientWidth+"px"
        } 
    </script>
</head>

<body>
    <div "width(this.id)"; style="background-color:#24464F; position:absolute; top:0; left:0; width:"width()"px; height:350px;">
    	<p>Hello World2 </p>
    </div>
</body>

**chrishirst** · 11-28-2009, 09:43 AM

I find that

width:100%;

does that just as easily.

**philmetz** · 11-28-2009, 11:17 AM

But then when I resize the browser and divs within that div are compressed and so doesnt look good

**chrishirst** · 11-28-2009, 11:26 AM

So you specify everything in relative units (% or em) so they all resize and move relative to each other.

**wayfarer07** · 11-28-2009, 01:01 PM

Using JavaScript to fix display issues is usually a bad idea, because if it is turned off, your page breaks. I forget the exact percentage, and it's only an estimate anyway, but it is something like 6-10% of users have browsers set with JS disabled.

It's ok to use JS to alter display if it still looks ok without JS, however, but I don't recommend relying on it with certainty, unless you have a web application which will break without it anyway, in which case you should be alerting your users to turn it on.