当仅在HTML中明确指定调整大小的宽度时，使用javascript得出图像的高度
[英]Using javascript to derive height of image when only resized width is explicitly given in html
问题描述
Forgive my ignorance of javascript, but I'm trying to create a simple image hover that enlarges the image when you hover your mouse over it. 
原谅我对javascript的无知，但是我试图创建一个简单的图像悬停功能，当您将鼠标悬停在图像悬停时，图像会放大。 (And no, I don't want to use JQuery. I want to learn this directly in javascript!) My problem is that only the width is specified in the html. （而且不，我不想使用JQuery。我想直接在javascript中学习！）我的问题是在html中仅指定了宽度。 The height is omitted so that the image displays proportionally on the page. 高度被省略，以便图像按比例显示在页面上。 When I hover over the image with my mouse, the javascript works fine in IE, but in FF, Chrome, Safari, etc. img.offsetHeight gets assigned 0 rather than a proportion of img.offsetWidth. 当我将鼠标悬停在图像上时，javascript在IE中工作正常，但在FF，Chrome，Safari等中正常工作。img.offsetHeight被分配为0，而不是img.offsetWidth的比例。
<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" >
As you can see from the img tag, height is inferred proportional to width by not being specified. 从img标签中可以看到，通过不指定高度来推断高度与宽度成比例。 Can someone tell me how I can use javascript to derive thisheight from thiswidth? 有人可以告诉我如何使用JavaScript从thiswidth导出thisheight吗？
3 个解决方案
解决方案1
0 2012-03-03 11:39:43
this will work for you in all ie FF, Chrome, Safari, etc 这将对您都适用，例如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>
解决方案2
0 2012-03-03 11:41:05
this is why it's easier to do such things with jquery, some browsers keep dimension values in offsetWidth others don't; 这就是为什么使用jquery进行此类操作更容易的原因，有些浏览器将维度值保留在offsetWidth中，而其他浏览器则不这样做。
here's a tip of how you can get across this problem 这是如何解决这个问题的提示
var thiswidth=img.offsetWidth;
var thisheight=img.offsetHeight;
//it's non IE browser
if(XMLHttpRequest){
var thisheight=img.clientHeight;
var thiswidth=img.clientWidth;
}
解决方案3
0 2012-03-03 11:46:43
This works fine for me on Firefox (I don't have access to other browsers right now, sorry): 这对我在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>
The main differences between this code and yours is that: 此代码与您的代码之间的主要区别在于：
- I'm only accessing the element after it is declared 我只在声明后访问元素
- I'm only accessing its properties after the image loads 我只在图像加载后访问其属性
I'm also only adding the onmouseover and onmouseout attributes later because it makes the HTML look cleaner, but that's optional. 稍后我还将仅添加onmouseover和onmouseout属性，因为它使HTML看起来更干净，但这是可选的。
Update: actually, adding the event handlers later isn't optional, because they use the calculated bigwidth and bigheight , which are only available after the image loads. 更新：实际上，稍后添加事件处理程序不是可选的，因为它们使用计算出的bigwidth和bigheight ，它们仅在图像加载后可用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.