如何找出尚未在 JavaScript（在 IE 中）中设置样式的图像的宽度？

发布于 2024-12-05 11:52:00 字数 228 浏览 0 评论 0原文

想象一下，

    img = document.createElement("img");
    img.src = "MahImage.jpg";
    x.appendChild(img);

如果不使用 jQuery，我可以做什么来找出图像的宽度和高度？

我目前正在使用 .width ，它适用于任何智能浏览器，但我必须找到一种让 IE 满意的方法

原文

Imagine you have the following

    img = document.createElement("img");
    img.src = "MahImage.jpg";
    x.appendChild(img);

What can I do to find out the Width and Height of the image without using jQuery?

I am currently using .width , which works fine for any intelligent browser, but I have to find out a way to make IE happy

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天生の放荡 2024-12-12 11:52:00

图像加载后，您可以访问属性宽度和高度。

例如：

alert(img.height + img.width);

您还可以使用属性 clientHeight 和 clienWidth 获取图像尺寸。

要了解图像是否已加载，请使用 onload hanler。

例如

img = document.createElement("img");
img.src = "MahImage.jpg";
img.onload = imageproperties;
x.appendChild(img);

function imageproperties() {
    alert(img.height + img.width);
}

After image load's you can access to properties width and height.

For example:

alert(img.height + img.width);

Also you can get image dimensions using properties clientHeight and clienWidth

To know if image loaded use onload hanler.

For example

img = document.createElement("img");
img.src = "MahImage.jpg";
img.onload = imageproperties;
x.appendChild(img);

function imageproperties() {
    alert(img.height + img.width);
}

回复收藏 0 原文

允世 2024-12-12 11:52:00

您可以访问图像的 width 和 height 属性，但它们只会在图像加载后返回有用的值；因此您只想在图像的 onload 事件中访问它们（或者给它一个合理的加载时间）。

img = document.createElement("img");
img.onload = function () {
    this.height;
    this.width;
};
img.src = "MahImage.jpg";
x.appendChild(img);

您可以在这里看到它的工作原理： http://jsfiddle.net/aS7a7/

You can access the width and height properties of the image, but they will only return a useful value once the image has loaded; so you'll only want to access them inside the onload event of the image (or give it a reasonable time to load).

img = document.createElement("img");
img.onload = function () {
    this.height;
    this.width;
};
img.src = "MahImage.jpg";
x.appendChild(img);

You can see this working here: http://jsfiddle.net/aS7a7/

回复收藏 0 原文

趁微风不噪 2024-12-12 11:52:00

这很棘手，因为在加载完成之前您无法找到图像的高度/宽度。这意味着您需要附加到图像加载的回调：

var img = document.createElement("img");
img.src = "MahImage.jpg";
img.onload = imageReady;
x.appendChild(img);

var imageReady = function() {
  alert(img.height); 
  alert(img.width);
}

This is tricky because you cant find the height/width of an image until after it is done loading. This means you'll need a callback attached to the load of the image:

var img = document.createElement("img");
img.src = "MahImage.jpg";
img.onload = imageReady;
x.appendChild(img);

var imageReady = function() {
  alert(img.height); 
  alert(img.width);
}

回复收藏 0 原文

↘人皮目录ツ 2024-12-12 11:52:00

您需要等待图像加载。代码如下（在 Chrome 中测试）：

img = document.createElement("img");
img.src = "http://google.ru/logos/2011/Albert_Szent_Gyorgyi-2011-hp.jpg";
img.onload = function(){
    console.log(img.width, img.height);
}
document.getElementsByTagName('body')[0].appendChild(img);

You need to wait until the image will be loaded. Here is the code (tested in Chrome):

img = document.createElement("img");
img.src = "http://google.ru/logos/2011/Albert_Szent_Gyorgyi-2011-hp.jpg";
img.onload = function(){
    console.log(img.width, img.height);
}
document.getElementsByTagName('body')[0].appendChild(img);

回复收藏 0 原文

~没有更多了~