Immediately set the width attribute of an HTML element using JavaScript

Question

Immediately set the width attribute of an HTML element using JavaScript

Can an element's width be dynamically set using the following code:

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

In this code, 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;
        }

Alternatively, should the img's width be adjusted within a JavaScript function?

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

javascript html css

Answer 1

Answer №1

Using that particular syntax won't work for this task. One option is to utilize the document.write method, but it's recommended to wait until after the DOM has loaded. This is because the accuracy of your getScreenSize function may be compromised otherwise (though testing will confirm).

To implement using document.write:

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

To execute after the DOM loads, place this code at the very end of your page, right before the closing </body> tag:

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

In both instances, focus remains on the width attribute (without a unit suffix like "px"). However, consider utilizing the CSS width property (which requires the suffix) as an alternative.

Instead of depending on JavaScript for setting the width, exploring CSS options is advised. You can make the image stretch 100% within its container by including style='width: 100%' within the tag or specifying:

#backgroundImg {
    width: 100%;
}

...within a stylesheet.

Answer 2

Using that particular syntax won't work for this task. One option is to utilize the document.write method, but it's recommended to wait until after the DOM has loaded. This is because the accuracy of your getScreenSize function may be compromised otherwise (though testing will confirm).

To implement using document.write:

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

To execute after the DOM loads, place this code at the very end of your page, right before the closing </body> tag:

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

In both instances, focus remains on the width attribute (without a unit suffix like "px"). However, consider utilizing the CSS width property (which requires the suffix) as an alternative.

Instead of depending on JavaScript for setting the width, exploring CSS options is advised. You can make the image stretch 100% within its container by including style='width: 100%' within the tag or specifying:

#backgroundImg {
    width: 100%;
}

...within a stylesheet.

Answer 3

Answer №2

It is unnecessary to include "+px" in the image tag.

Answer 4

It is unnecessary to include "+px" in the image tag.

Answer 5

Answer №3

It is always recommended to separate content (HTML) from behavior (javascript) for better code organization and maintainability. A good example of this is avoiding using inline javascript like

onclick='somefunction(); return false;'

inside HTML elements, such as links. Instead, utilizing libraries like jQuery allows you to define event handling in a more structured way, like so:

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

within a

$(document).ready(

block. This way, all the javascript logic can be centralized and managed efficiently, rather than being scattered throughout the markup. The same principle applies to CSS stylesheets versus inline styles - keeping styles separate ensures cleaner and more organized code.

Answer 6

It is always recommended to separate content (HTML) from behavior (javascript) for better code organization and maintainability. A good example of this is avoiding using inline javascript like

onclick='somefunction(); return false;'

inside HTML elements, such as links. Instead, utilizing libraries like jQuery allows you to define event handling in a more structured way, like so:

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

within a

$(document).ready(

block. This way, all the javascript logic can be centralized and managed efficiently, rather than being scattered throughout the markup. The same principle applies to CSS stylesheets versus inline styles - keeping styles separate ensures cleaner and more organized code.

Immediately set the width attribute of an HTML element using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

The property 'filter' is not recognized on the 'Object' type. An attempt to filter the response was made

looking to retrieve the corresponding value of a specific array key

substitute tags

Encountered a Webpack issue when trying to load the primeng.min

What is the best way to retrieve a value from a database and display it in a radio

Is there a way to create a navigation menu that highlights as we scroll down the page?

Sending input values to controller action parameters in CakePHP

Duplicate text content from a mirrored textarea and save to clipboard

Tips for displaying diverse content in a DIV container when users click on various sections of an image

Which names can be used for HTML form tags in jQuery?

Find the index of the class that contains the specified element

adjust the size of the textarea to perfectly fill the available space

State is not being updated by useState after the second API call in MUI and ReactJS

What level of consistency does the canvas.toBlob() method maintain across various web browsers?

Creating an overflow effect for sliders using only CSS

What is the best way to incorporate products as components into the cart component?

Utilize JavaScript array to filter, match, and perform calculations based on dates and names

Refreshing the form upon submission

Initiate an animation upon reaching a designated element using Jquery scroll event

Creating a personalized HTML email template with a TypeScript foreach loop