Javascript Images Resize_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-12 05:14 出处：网络

相关专题：javascript

I want to resize images depend on its size in CSS with JS function which get all images in the div but i am facing problems with getelement by tagname which i have to set the images styles into the img HTML tag or its never work , in this test project its easy to do but in my real one there is many images into this div and many pages so here the function and its 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].sty开发者_如何学Cle.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>

Ignore style and just check for height and width like in this example:

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;