Javascript图片调整大小

时间:2011-10-12 07:41:17

标签: javascript

我想根据CSS中的大小来调整图像的大小,使用JS函数获取div中的所有图像但是我遇到了tagname的getelement问题,我必须将图像样式设置为img HTML标记或者它从不工作,在这个测试项目中它很容易做但在我真实的那个有很多图像到这个div和很多页面所以这里的功能及其HTML

<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>

1 个答案:

答案 0 :(得分: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;