再说IMG的高度和宽度

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gucsnet/archive/2007/02/04/639263.html

文章标签：

#javascript #ViewUI

前几天发了一段文字《关于IMG的高度和宽度》，可能是问题太简单了，鲜有回复。于是，我不得不独自考虑这个问题，下面是我思考的过程，还请各位指教。

1、可能是方法调用时机的问题

前几天的测试中，我一直以为是DOM和JavaScript的区别，导致了不能取得图片大小的问题。今晚我又分析了上次的测试代码，发现两个方法的触发时间不同：DOM的方法是在HTML解析时触发，而JavaScript的方法则是在图片加载完成后，也就是在IMG的onload事件中触发的。

于是，我将resizePicturesOfThisPost方法改在BODY的onload事件中调用，问题解决了。

Body Onload Event
1

<html>
2

<head>
3

<!--
5

function resizePicturesOfThisPost()
6

{
7

var pics = document.getElementsByName("PicturesOfThisPost");
8

var i;
9

var intMaxWidth = 600;
11

var intRate = 1;
12

for (i = 0; i < pics.length; i++)
14

{
15

if (pics[i].width > intMaxWidth)
16

{
17

intRate = intMaxWidth / pics[i].width;
18

pics[i].width = pics[i].width * intRate;
20

pics[i].height = pics[i].height * intRate;
21

}
22

}
23

}
24

//-->
25

</script>
26

</head>
27

<body onload="resizePicturesOfThisPost();">
29

<img name="PicturesOfThisPost" src="" border="0" />
30

</body>
31

</html>
32

2、如何追加事件处理

为了节约修改页面的时间，我在index页面使用Server.Execute方法调用其他页面。也就是说，我无法在子页面中操作BODY的onload事件，那么，要怎么样才能将子页面的JavaScript函数添加到BODY的onload事件中呢？

在MSDN中有一个attachEvent方法，它的原型是：bSuccess = object.attachEvent(sEvent, fpNotify)

var rtn = document.body.attachEvent("onload", resizePicturesOfThisPost);

从理论上分析，有了上面的代码，我就可以在子页面将resizePicturesOfThisPost加到BODY的onload事件中了。可是，意想不到的事情又发生了，这段代码没有任何作用，没有任何错误，attachEvent的返回值也是true。

3、也许是IE的BUG

从attachEvent的返回值是true可以断定，attachEvent方法调用没有错误，我想也许换个事件就好用了。google了一下之后，还是在园子里找到了解决方案：birdshome的一段文字中提到了这个问题，他说在document.body对象上的确没有效果，但是在window对象的onload事件上是正确的。

经过测试，birdshome所言非虚，为了进一步验证他的猜想，我在FireFox测试了相同的代码，无论是document.body还是window都没有效果。也许是IE和FF共同的bug，也许……

4、结论

DOM和JavaScript对象在IMG处理方面没有区别，上次的问题是因为触发时机不同造成的。关于attachEvent在document.body的onload事件无效一事，哪位有深入的研究，还请不吝赐教。

转载于:https://www.cnblogs.com/gucsnet/archive/2007/02/04/639263.html