Enlarge images in my html page using JavaScript - Stack Overflow

admin管理员组

文章数量:1026373

I try to enlarge images in my html page by using JavaScript. The image in the html- source code always has the height/width 100 Pixel. By clicking on the image, the image should be displayed in original size. By clicking the image again, the image should displayed in height/width 100 Pixel.

Example image in the html source code:

<img src="image.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

My JavaScript source code:

function swap(img)
 {
  if (img.width==="100")
   {
    img.width="auto";
    img.height="100%";
   }
  else
   {
    img.width="100";
    img.height="100";
   }
}

My Problem is the image size dose not change. What am I doing wrong? Does anyone have maybe a better idea?

I try to enlarge images in my html page by using JavaScript. The image in the html- source code always has the height/width 100 Pixel. By clicking on the image, the image should be displayed in original size. By clicking the image again, the image should displayed in height/width 100 Pixel.

Example image in the html source code:

<img src="image.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

My JavaScript source code:

function swap(img)
 {
  if (img.width==="100")
   {
    img.width="auto";
    img.height="100%";
   }
  else
   {
    img.width="100";
    img.height="100";
   }
}

My Problem is the image size dose not change. What am I doing wrong? Does anyone have maybe a better idea?

• javascript
• html
• css

Share Improve this question Follow edited May 2, 2016 at 9:25 cнŝdk 32.2k77 gold badges6060 silver badges8080 bronze badges asked May 2, 2016 at 8:01 OlliOlli 8977 bronze badges 5

• 1 ===(strict parison) will not make it true as img.width will be of type Number – Rayon Commented May 2, 2016 at 8:05
• 2 Play with the style-properties than Element-properties – Rayon Commented May 2, 2016 at 8:07
• Haven't done it in a while but i think you should use img.clientWidth, this returns the width as it is rendered in the browser. – namlik Commented May 2, 2016 at 8:07
• 1 Why not using JS only for toggling class and leave the rest of the job to CSS? – markoffden Commented May 2, 2016 at 8:12
• Are you looking for a pure-javascript solution or you are using any javascript framework/library? – Hitmands Commented May 2, 2016 at 8:20

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

Provided your images don't already have a CSS class, you can swap a full-size class easily.

function swap(img) {
  if (img.className !== "full-size") img.className = "full-size";
  else img.className = "";
}

.full-size {
  height: 100%;
  width: 100%;
}

<img src="https://multimedia.journalism.berkeley.edu/wp-content/uploads/2014/09/css101-main.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

You'd be better off using jQuery to handle multiple classes on a single HTML element though.

Using image.width is not the best practice, and it has been so for a very long time.

What you should be doing is using the "style" property, both in your HTML and in the JavaScript. Aside from that, you always need to define units, e.g. pixels (px), percent (%).

So your image should look something like this (I ignored the events):

<img style="cursor: pointer; width: 100%, height: 100%;">

I didn't understand if you wanted 100px or 100%, so change as needed.

Your JS should look something like this:

function swap(img)
 {
  if (img.style.width==="100%")
   {
    img.style.width="auto";
    img.style.height="100%";
   }
  else
   {
    img.style.width="100%";
    img.style.height="100%";
   }
}

Fiddle Link

<img src="https://c7.staticflickr./3/2538/3742771246_2648fa4e6e_b.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">
 <script>
   function swap(img)
    {
 debugger;
 if (img.width===100)
{
 img.style.height = 'auto';
 img.style.width = 'auto';
 }
else
{
   img.style.height = '100px';
img.style.width = '100px';
}
}</script>

Use style property of the element to apply style. Use .width property just for conditions.

function swap(img) {
  if (img.width === 100) {
    //Remove the quotes around `100` as you are using strict parison
    img.width = "auto";
    img.style.width = "auto";
    img.style.height = "100%";
  } else {
    img.width = "100";
    img.style.width = "";
    img.style.height = "";
  }
}

<img src="http://www.mariodemiranda./uploads/showcase/4_pic_indian-art-4.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

Edit: Using css class, .contains,.add/.remove will be handy.

function swap(img) {
  img.classList.contains('fs') ? img.classList.remove('fs') : img.classList.add('fs')
}

.fs {
  width: auto;
  height: 100%;
}

<img src="http://www.mariodemiranda./uploads/showcase/4_pic_indian-art-4.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

Your actual code:

In your code the problem was, as stated in ments, the strict paraison where you were paring a string with a number, because img.width is a number and "100" is a string.

So to fix it you just need to change the paraison, either byu using == paraison or just 100 instead of "100":

function swap(img) {
  if (img.width === 100) {
    img.width = "auto";
    img.height = "100%";
  } else {
    img.width = "100";
    img.height = "100";
  }
}

<img src="image.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

Alternatives:

• In fact in Javascript to access an element attribute (width or height) you better use element.getAttribute() method, this is how should be your code:

function swap(img) {
  if (img.getAttribute("width") === "100") {
    img.width = "auto";
    img.height = "100%";
  } else {
    img.width = "100";
    img.height = "100";
  }
}

<img src="image.jpg" onclick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

• Otherwise, just use height and width as properties in the style of your element, then access it using element.style.height.

Further reading:

For further reading you can see the diffirence between height/width element attributes and styles properties, here:

Should I specify height and width attributes for my IMGs in HTML?

I would prefer using css to do this and changing the element class accordingly when click occurs.

The script:

function swap(img) {
  if (img.classList.contains('fullsize')) {
    img.classList.remove('fullsize');
  } else {
    img.classList.add('fullsize');
  }
}

The element:

<img src="image.jpg" onclick="swap(this)" class="resize-image" style="cursor: pointer;">

CSS:

.resize-image {
  width: 100px;
  height: 100px;
}

.resize-image.fullsize {
  width: auto;
  height: 100%;
}

// Or if using SASS etc

.resize-image {
  width: 100px;
  height: 100px;

  &.fullsize {
    width: auto;
    height: 100%;
  }
}

function swap(img)
 {
 debugger
  if (img.style.width==="100px")
   {
    img.style.width="auto";
    img.style.height="100%";
   }
  else
   {
    img.style.width="100px";
    img.style.height="100px";
   }
}

I try to enlarge images in my html page by using JavaScript. The image in the html- source code always has the height/width 100 Pixel. By clicking on the image, the image should be displayed in original size. By clicking the image again, the image should displayed in height/width 100 Pixel.

Example image in the html source code:

<img src="image.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

My JavaScript source code:

function swap(img)
 {
  if (img.width==="100")
   {
    img.width="auto";
    img.height="100%";
   }
  else
   {
    img.width="100";
    img.height="100";
   }
}

My Problem is the image size dose not change. What am I doing wrong? Does anyone have maybe a better idea?

I try to enlarge images in my html page by using JavaScript. The image in the html- source code always has the height/width 100 Pixel. By clicking on the image, the image should be displayed in original size. By clicking the image again, the image should displayed in height/width 100 Pixel.

Example image in the html source code:

<img src="image.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

My JavaScript source code:

function swap(img)
 {
  if (img.width==="100")
   {
    img.width="auto";
    img.height="100%";
   }
  else
   {
    img.width="100";
    img.height="100";
   }
}

My Problem is the image size dose not change. What am I doing wrong? Does anyone have maybe a better idea?

• javascript
• html
• css

Share Improve this question Follow edited May 2, 2016 at 9:25 cнŝdk 32.2k77 gold badges6060 silver badges8080 bronze badges asked May 2, 2016 at 8:01 OlliOlli 8977 bronze badges 5

• 1 ===(strict parison) will not make it true as img.width will be of type Number – Rayon Commented May 2, 2016 at 8:05
• 2 Play with the style-properties than Element-properties – Rayon Commented May 2, 2016 at 8:07
• Haven't done it in a while but i think you should use img.clientWidth, this returns the width as it is rendered in the browser. – namlik Commented May 2, 2016 at 8:07
• 1 Why not using JS only for toggling class and leave the rest of the job to CSS? – markoffden Commented May 2, 2016 at 8:12
• Are you looking for a pure-javascript solution or you are using any javascript framework/library? – Hitmands Commented May 2, 2016 at 8:20

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

Provided your images don't already have a CSS class, you can swap a full-size class easily.

function swap(img) {
  if (img.className !== "full-size") img.className = "full-size";
  else img.className = "";
}

.full-size {
  height: 100%;
  width: 100%;
}

<img src="https://multimedia.journalism.berkeley.edu/wp-content/uploads/2014/09/css101-main.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

You'd be better off using jQuery to handle multiple classes on a single HTML element though.

Using image.width is not the best practice, and it has been so for a very long time.

What you should be doing is using the "style" property, both in your HTML and in the JavaScript. Aside from that, you always need to define units, e.g. pixels (px), percent (%).

So your image should look something like this (I ignored the events):

<img style="cursor: pointer; width: 100%, height: 100%;">

I didn't understand if you wanted 100px or 100%, so change as needed.

Your JS should look something like this:

function swap(img)
 {
  if (img.style.width==="100%")
   {
    img.style.width="auto";
    img.style.height="100%";
   }
  else
   {
    img.style.width="100%";
    img.style.height="100%";
   }
}

Fiddle Link

<img src="https://c7.staticflickr./3/2538/3742771246_2648fa4e6e_b.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">
 <script>
   function swap(img)
    {
 debugger;
 if (img.width===100)
{
 img.style.height = 'auto';
 img.style.width = 'auto';
 }
else
{
   img.style.height = '100px';
img.style.width = '100px';
}
}</script>

Use style property of the element to apply style. Use .width property just for conditions.

function swap(img) {
  if (img.width === 100) {
    //Remove the quotes around `100` as you are using strict parison
    img.width = "auto";
    img.style.width = "auto";
    img.style.height = "100%";
  } else {
    img.width = "100";
    img.style.width = "";
    img.style.height = "";
  }
}

<img src="http://www.mariodemiranda./uploads/showcase/4_pic_indian-art-4.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

Edit: Using css class, .contains,.add/.remove will be handy.

function swap(img) {
  img.classList.contains('fs') ? img.classList.remove('fs') : img.classList.add('fs')
}

.fs {
  width: auto;
  height: 100%;
}

<img src="http://www.mariodemiranda./uploads/showcase/4_pic_indian-art-4.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

Your actual code:

In your code the problem was, as stated in ments, the strict paraison where you were paring a string with a number, because img.width is a number and "100" is a string.

So to fix it you just need to change the paraison, either byu using == paraison or just 100 instead of "100":

function swap(img) {
  if (img.width === 100) {
    img.width = "auto";
    img.height = "100%";
  } else {
    img.width = "100";
    img.height = "100";
  }
}

<img src="image.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

Alternatives:

• In fact in Javascript to access an element attribute (width or height) you better use element.getAttribute() method, this is how should be your code:

function swap(img) {
  if (img.getAttribute("width") === "100") {
    img.width = "auto";
    img.height = "100%";
  } else {
    img.width = "100";
    img.height = "100";
  }
}

<img src="image.jpg" onclick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

• Otherwise, just use height and width as properties in the style of your element, then access it using element.style.height.

Further reading:

For further reading you can see the diffirence between height/width element attributes and styles properties, here:

Should I specify height and width attributes for my IMGs in HTML?

I would prefer using css to do this and changing the element class accordingly when click occurs.

The script:

function swap(img) {
  if (img.classList.contains('fullsize')) {
    img.classList.remove('fullsize');
  } else {
    img.classList.add('fullsize');
  }
}

The element:

<img src="image.jpg" onclick="swap(this)" class="resize-image" style="cursor: pointer;">

CSS:

.resize-image {
  width: 100px;
  height: 100px;
}

.resize-image.fullsize {
  width: auto;
  height: 100%;
}

// Or if using SASS etc

.resize-image {
  width: 100px;
  height: 100px;

  &.fullsize {
    width: auto;
    height: 100%;
  }
}

function swap(img)
 {
 debugger
  if (img.style.width==="100px")
   {
    img.style.width="auto";
    img.style.height="100%";
   }
  else
   {
    img.style.width="100px";
    img.style.height="100px";
   }
}

本文标签： Enlarge images in my html page using JavaScriptStack Overflow