Set a HTML elements width attribute right away using javascript

Question

Is it possible to set an elements width like this:

<img id="backgroundImg" src="images/background.png" alt="" width="javascript:getScreenSize()['width']+px" height="1100px"/>

Where getScreenSize() is a javascript function.

        function getScreenSize()
        {
            var res = {"width": 630, "height": 460};

            if (document.body) 
            {
                 if (document.body.offsetWidth)  res["width"]  = document.body.offsetWidth;
                 if (document.body.offsetHeight) res["height"] = document.body.offsetHeight;
            }

            if (window.innerWidth)  res["width"]  = window.innerWidth;
            if (window.innerHeight) res["height"] = window.innerHeight;
            alert( res['width'] );

            return res;
        }

Or do I have to change the img's width inside a javascript function?

function changeImgWidth( img )
{
   img.offsetRight = getScreenWidth()['width'] + "px";
}

What if I want to set the width to (getScreenSize()['width'] - CONTENT_WIDTH)/2. Its alot easier for me with javascript, the above code is a simple example of what I am doing. Plus what if the img is nested also — user593747
– user593747, Commented Jun 4, 2011 at 7:24

T.J. Crowder · Accepted Answer · 2011-06-04 07:24:10Z

You can't do it with that syntax, no. You could use document.write to do it, but I suspect you'd be better off doing it after the DOM loads, because I think your getScreenSize function may not report correct results until then (but it may, you'll have to test).

To do it with document.write:

<script>
document.write('<img id="backgroundImg" src="images/background.png" alt="" width="' + getScreenSize()['width'] + '" height="1100px"/>');
</script>

To do it once the DOM is loaded, put this at the very end of your page, just before the closing </body> tag:

<script>
document.getElementById('backgroundImg').width = getScreenSize()['width'];
</script>

In both of those examples, I've stuck with the width attribute (note that you don't use a units suffix — "px" — with the width attribute). But you might consider using the CSS width property instead (which you would use the suffix with).

Stepping back, though, rather than relying on JavaScript to set the width, I'd recommend trying to do it with CSS. You can make the image 100% of the width of its container by using style='width: 100%' within the tag or:

#backgroundImg {
    width: 100%;
}

...in a stylesheet.

mightyplow · Accepted Answer · 2011-06-04 07:24:46Z

1

you don't need +px in the img-tag

answered Jun 4, 2011 at 7:24

mightyplow

5192 gold badges6 silver badges11 bronze badges

Comments

yitwail · Accepted Answer · 2011-06-04 07:33:34Z

0

Even if it could be done that way, it would be better not to, so you can separate content(HTML) & behavior(javascript). It's the same reason why it's better not to put

onclick='somefunction(); return false;'

inside a link, for example. Instead, if you used jQuery, for example, you could put

$('#somelink').click(function() {//do something});

inside a

$(document).ready(

block. If nothing else, you can have all the javascript in one place, instead of scattered everywhere in the markup. CSS stylesheets are better than inline styles for the same reason.

answered Jun 4, 2011 at 7:33

yitwail

2,0093 gold badges21 silver badges27 bronze badges

Collectives™ on Stack Overflow

Set a HTML elements width attribute right away using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related