Styling a image in js without the img tag

I mean something like this :

document.getElementById("image-div").innerHTML="<img src=''>";

How we can change the width/height of the image in js? I tried but nothing.
Is changing the id(container) but the image size still the same.

3 thoughts on “Styling a image in js without the img tag”

  1. const img = document.getElementById('image-div');
    img.style.width = '100px';
    img.style.height = '100px';
    

    This is how you can change the height and width of an image.
    Add an id to your and get that id in your js

    Reply
  2. Try somthing like this:

    document.getElementById("myImg").height = "300";
    document.getElementById("myImg").width = "300";
     <img id="myImg" src="https://i.redd.it/31b2ii8hchi31.jpg" width="107" height="98">
    Reply
  3. I noticed your using innerHTML to add an image as opposed to the image already existing. There are a number of ways to achieve what you’re asking. I haven’t tested any of this but I figured I’d try to help you find a solution.

    1. .innerHTML('<img src="src" style="height:10px; width: 10px;">') as you have demonstrated. This should make add an image with the selected INLINE styling.

    2. This solution adds inline styling to a image element created through javascript.

      let div = document.getElementById("image-div")

      let img = document.createElement('img');

      img.src = 'https://extremelycoolimage.com/image.png';

      img.style.width = '100px';

      img.style.height = '100px';

      div.appendChild(img);

    3. This solution adds class styling to a image element created through javascript.

      let div = document.getElementById("image-div")

      let img = document.createElement('img');

      img.src = 'https://extremelycoolimage.com/image.png';

      img.classList.add("image-class");

      div.appendChild(img);

    I wish you luck in your project.

    Edit: I believe what you’re experiencing is adjusting the height and width of the CONTAINER but image elements are defaulted as an inline-block element. So, the width and height of the image (i think) are maintained when appended to the container regardless of the containers height / width definition.

    Reply

Leave a Comment