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";
}

Answer 1

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.

Answer 2

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

Answer 3

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.