Question

我尝试使用JavaScript在html页面中放大图像。 html源代码中的图像始终具有100像素的高度/宽度。通过单击图像，图像应以原始大小显示。再次单击图像，图像应以高度/宽度100像素显示。

html源代码中的示例图片：

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

我的JavaScript源代码：

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

我的问题是图像大小不会改变。我究竟做错了什么？有没有人有更好的主意？

Answer 1

如果您的图片已经没有CSS课程，您可以轻松交换全尺寸课程。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

最好使用jQuery处理单个HTML元素上的多个类。

Answer 2

使用image.width不是最好的做法，而且已经很长时间了。

您应该做的是在HTML和JavaScript中使用“style”属性。除此之外，您始终需要定义单位，例如像素（px），百分比（％）。

所以你的图像应该是这样的（我忽略了事件）：

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

我不明白你是否需要100px或100％，所以根据需要进行更改。

你的JS应该是这样的：

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

Answer 3

您的实际代码：

在您的代码中，正如评论中所述，问题是您将string与number进行比较的严格比较，因为img.width是number并且"100"是string。

所以要解决这个问题，你只需要改变比较，使用==比较或100代替"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">

<强>备选方案：

实际上在Javascript中访问一个元素属性（宽度或高度）你最好使用 element.getAttribute() method ，这个应该是你的代码：

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

否则，只需使用height和width作为您的风格的属性元素，然后使用element.style.height。

进一步阅读：

如需进一步阅读，您可以在此处看到height / width元素属性和样式属性之间的差异：

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

Answer 4

使用元素的style属性来应用.width。仅针对条件使用function swap(img) { if (img.width === 100) { //Remove the quotes around `100` as you are using strict comparison img.width = "auto"; img.style.width = "auto"; img.style.height = "100%"; } else { img.width = "100"; img.style.width = ""; img.style.height = ""; } }属性。

＆＃13;

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

＆＃13;

class

＆＃13;

修改：使用css .contains，.add，.remove / function swap(img) { img.classList.contains('fs') ? img.classList.remove('fs') : img.classList.add('fs') }将非常方便。

＆＃13;

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

＆＃13;

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

＆＃13;

 <TextBox TextWrapping="Wrap"/>

＆＃13;

Answer 5

Fiddle Link

<img src="https://c7.staticflickr.com/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>

Answer 6

我更喜欢使用css来执行此操作，并在发生单击时相应地更改元素类。

剧本：

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

元素：

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

Answer 7

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

使用JavaScript在我的html页面中放大图像

7 个答案: