2011-10-12 213 views
0

我想调整大小的图像取决于它的大小与JS功能,它获得所有图像在div中,但我面临的问题getelement的标记名,我必须将图像样式设置为img HTML标记或它从来没有工作,在这个测试项目的容易做,但我真正的有许多图像到这个div和许多网页,使这里的功能和它的HTMLJavascript图像调整大小

<script type="text/javascript"> 
function x() { 
    var yourdiv = document.getElementById('test'); 
    var yourImgs = yourdiv.getElementsByTagName('img'); 
    for (var i = 0; i < yourImgs.length; i++) { 
     if (yourImgs[i].style.height == '1000px' && yourImgs[i].style.width == '1000px') 
      { 
       yourImgs[i].style.height = '700px'; 
       yourImgs[i].style.width = '800px'; 
      } 
     else 
      { 
      yourImgs[i].style.height = '400px'; 
       yourImgs[i].style.width = '300px'; 
      } 

    } 
} 
window.onload= x; 
</script> 
</head> 
    <body> 
     <div id="test"> 
     <img alt='' class="test_img" style="height:1000px;width: 1000px;" src='imges/book1.jpg' /> 
     <img alt='' class="test_img" style="height:1000px;width: 1000px;" src='imges/book2.jpg' /> 
     </div> 
+0

似乎在这里工作正常,当我把它放入jsFiddle:http://jsfiddle.net/jfriend00/5yjfy/。 – jfriend00

+0

在你的代码样例中,'else {}'块永远不会执行,因为'if()'里面的条件是你的代码的全部_true_!如果您需要在下载后将'IMG'标记重置为真实图像大小,只需执行:'.style.width =“”; .style.height =“”;' –

+0

我在这里看到问题:http://jsfiddle.net/5yjfy/1/ yourImgs [i] .style.height和yourImgs [i] .style.width永远不会获得值,如果风格不内联。这是他的意思。 –

回答

0

忽略的风格,只是检查的高度和宽度像这个例子:

http://jsfiddle.net/5yjfy/2/

function x() { 
    var yourdiv = document.getElementById('test'); 
    var yourImgs = yourdiv.getElementsByTagName('img'); 
    for (var i = 0; i < yourImgs.length; i++) { 
     if (yourImgs[i].height == 1000 && yourImgs[i].width == 1000) 
      { 
       yourImgs[i].style.height = '700px'; 
       yourImgs[i].style.width = '800px'; 
      } 
     else 
      { 
      yourImgs[i].style.height = '400px'; 
       yourImgs[i].style.width = '300px'; 
      } 

    } } window.onload= x; 
+0

是的,它的工作非常感谢 – user974946