Question

我有下一个功能：

function setImagesWidth(id,width) {
    var images = document.getElementById(id).getElementsByTagName("img");
    for(var i = 0; i < images.length;i++) {
        // If the real width is bigger than width parameter
            images[i].style.width=width;    
        //}         
    }       
}

我想仅在图像实际宽度大于属性值时才将所有img标签的css width属性设置为特定值。如果可能的话，我想要一个不使用任何特定框架的解决方案。

对于109px宽度的图像，

images[i].offsetWidth返回111。这是因为每边边界1px？

Answer 1

希望有足够的示例代码可以提供您想要的内容：

var myImage = document.getElementById("myImagesId");
var imageWidth = myImage.offsetWidth;
var imageHeight = myImage.offsetHeight;

这应该为您提供获得所需解决方案所需的数字。我想你可以自己编写其余的代码。：）

编辑：在这里，我无法自拔 - 这就是你追求的目标吗？

function setImagesWidth(id,width) {
   var images = document.getElementById(id).getElementsByTagName("img");
   for(var i = 0; i < images.length;i++) {
      if(images[i].offsetWidth > width) {
         images[i].style.width= (width + "px");
      }
   }           
}

Answer 2

@Sergio del Amo：的确，如果你查看我的链接，你会发现你想要clientWidth。

@Sergio del Amo：不幸的是，你不能接受自己的答案。但是你确实在“px”后缀中有一个无关的时期，所以让我们继续这个，包括clientWidth更改：

// width in pixels
function setImagesWidth(id, width)
{
    var images = document.getElementById(id).getElementsByTagName("img");
    var newWidth = width + "px";
    for (var i = 0; i < images.length; ++i)
    {
        if (images[i].clientWidth > width)
        {
            images[i].style.width = newWidth;
        }                       
    }
}

Answer 3

小心，看起来你可能更想要clientWidth：

http://developer.mozilla.org/en/Determining_the_dimensions_of_elements

Answer 4

编辑：我能否接受这个答案作为最后一个答案？

由于offsetWidth不返回任何单位，因此必须为css属性连接 .px 结尾。

// width in pixels
function setImagesWidth(id,width) {
    var images = document.getElementById(id).getElementsByTagName("img");
    for(var i = 0; i < images.length;i++) {
        if(images[i].offsetWidth > width) {
            images[i].style.width= (width+".px");   
        }           
    }       
}

Answer 5

以防你，读者，从谷歌来这里寻找一种方法来判断什么是实际图像文件像素宽度和高度，这是如何：

var img = new Image("path...");
var width = image.naturalWidth;
var height = image.naturalHeight;

在处理缩放图像上的各种绘图时，这非常有用。

＆＃13;

    var img = document.getElementById("img");
    var width = img.naturalWidth;
    var height = img.naturalHeight;
    document.getElementById("info").innerHTML = "HTML Dimensions: "+img.width+" x "+img.height + 
                                                "\nReal pixel dimensions:"+ 
                                                width+" x "+height;

＆＃13;

<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/0/03/Circle-withsegments.svg" width="100">

<pre id="info">

</pre>

＆＃13;

使用JavaScript实现图像宽度

5 个答案: