当html中只显式给出调整大小的宽度时，使用javascript来导出图像的高度

Using javascript to derive height of image when only resized width is explicitly given in html

本文关键字：使用 javascript 高度 图像 html 调整      更新时间：2023-09-26

请原谅我对javascript的无知，但我正在尝试创建一个简单的图像悬停，当你将鼠标悬停在图像上时，它会放大图像。（不，我不想使用JQuery。我想直接在javascript中学习这一点！）我的问题是，在html中只指定宽度。省略了高度，以便图像按比例显示在页面上。当我用鼠标悬停在图像上时，javascript在IE中运行良好，但在FF、Chrome、Safari等中运行良好。img.offsetHeight被分配为0，而不是img.offetWidth.的一部分

  <script type="text/javascript">
     var img=document.getElementById('imageid'); 
     var thiswidth=img.offsetWidth;
     var thisheight=img.offsetHeight;
     var ratio=thisheight/thiswidth;
     var bigwidth=600;
     var bigheight=bigwidth*ratio;
      function bigImg(x) {
        x.style.width=bigwidth;
        x.style.height=bigheight;
     }
     function normalImg(x) {
        x.style.width=thiswidth;
        x.style.height=thisheight;
     }
  </script> 
  <img id="imageid" onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="myimage.jpg" alt="image" width="200" >

正如您从img标记中看到的，高度是通过未指定而与宽度成比例推断的。有人能告诉我如何使用javascript从这个宽度派生出这个高度吗？

这将适用于所有ie FF、Chrome、Safari等

<html>
<body>
  <img id="imageid" onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="C810623C.gif" alt="image" width="200" > 
    <script type="text/javascript">
        var img = document.getElementById('imageid');
        var normsizeimg = img.style.width;
        var bigwidth = 600;
        function bigImg(x)
        { x.style.width = bigwidth; }
        function normalImg(x) { x.style.width = normsizeimg; }
</script>
</body>
</html>

这就是为什么使用jquery更容易做到这一点的原因，一些浏览器将维度值保持在offsetWidth中，而另一些浏览器则没有；

以下是如何解决问题的提示

var thiswidth=img.offsetWidth;
var thisheight=img.offsetHeight;
//it's non IE browser
if(XMLHttpRequest){
   var thisheight=img.clientHeight;
   var thiswidth=img.clientWidth;
}

这在Firefox上对我来说很好（对不起，我现在无法访问其他浏览器）：

<img id="imageid" src="myimage.jpg" alt="image" width="200" >
<script type="text/javascript">
var img = document.getElementById('imageid'); 
img.onload = function(){
    var thiswidth = img.offsetWidth;
    var thisheight = img.offsetHeight;
    var ratio = thisheight/thiswidth;
    var bigwidth = 600;
    var bigheight = bigwidth*ratio;
    img.onmouseover = function bigImg() {
        img.style.width = bigwidth;
        img.style.height = bigheight;
    }
    img.onmouseout = function normalImg(x) {
        img.style.width = thiswidth;
        img.style.height = thisheight;
    }
};
</script>

此代码与您的代码之间的主要区别在于：

  1. 我只是在元素声明之后才访问它
  2. 我只在图像加载后访问其属性

我稍后也只添加onmouseover和onmouseout属性，因为它使HTML看起来更干净，但这是可选的。

更新：实际上，在之后添加事件处理程序并不是可选的，因为它们使用了计算的bigwidth和bigheight，这两个值只有在图像加载后才可用。

相关文章：