Question

我正在设置宽度＆amp;我在javascript中创建的图像元素的高度属性。在FF，Opera＆amp; Chrome设置宽度和宽度身高正确。但是在IE 6＆amp; 7（没试过8）宽度＆amp;高度保持为0，直到下载图像。我需要这个的原因是我可以将每个图像放在行和放大器中。 cols基于它的当前大小。

如果无法设置宽度＆amp; IE中的高度属性我想我只需创建自己的自定义属性并将其设置在那里。

这是我用来创建＆amp;的基本代码。注入元素。

var img = document.createElement('img');
var wrap = document.createElement('div');

document.body.appendChild(wrap);
wrap.appendChild(img);

img.src = 'blah.jpg';
img.width = '100';
img.height = '100';
img.style.display = 'none';

// IE: width: 0 | height: 0
// FF: width: 100 | height: 100
alert('width: ' + img.width + ' | height: ' + img.height);

编辑：

我尝试过设置img.style.visibility ='hidden'而不是img.style.display ='none';但它没有什么区别。

修改

我发现了这个问题。实际问题是Aziz解决方案和我在原始示例中遗漏的内容的组合。在IE中，如果在分配宽度和宽度之前将元素附加到另一个元素中，则会出现这种情况。高度IE只是忽略它。

Answer 1

This problem is explained here

要在IE中获得正确的尺寸，您需要设置 ~~display: hidden~~ visibility: hidden 。但是，您必须确保仅在浏览器为IE时才设置它。

修改试试这个（适合我）

var img = document.createElement('img'); img.src = 'blah.jpg'; img.width = '3000'; img.height = '1000'; img.style.visibility = 'hidden'; document.body.appendChild(img); // should work correctly alert('width: ' + img.width + ' | height: ' + img.height);

Answer 2

您将需要该单位：

var img = document.createElement('img');

img.src = 'blah.jpg';
img.style.display = 'none';
img.style.width = '100px';
img.style.height = '100px';

document.body.appendChild(img);

// IE: width: 100 | height: 100
// FF: width: 100 | height: 100
alert('width: ' + img.style.width + ' | height: ' + img.style.height);

请记住添加单位“px”。分别使用element.style.width和element.style.height代替element.width和element.height，以实现跨浏览器的兼容性。

IE图像宽度＆amp;图像下载前高度= 0

2 个答案: