Javascript：在for循環中編輯圖像高度

我試圖編輯在javascript中for循環中重複的圖像高度，但我無法弄清楚我需要將其添加到哪裏。Javascript：在for循環中編輯圖像高度

這裏是變量，如果它是很重要的：

 var i; 
     var start = 1; 
     var seg = document.getElementById("selSegs").value; 
     var parent = document.getElementById("divInch"), //parent for appendChild 
       imagePath = 'InchwormSegment.gif', //variable for image 
       img; //adding img element

這裏是我的循環：

for(i = start; i<=seg; i++) { 

      img = new Image(); //creating new image object 
      img.src = imagePath; // element src = imagePath 
      img.style.height = "215px"; // sets the height of all in loop 
      // img.style.height = (img.style.height * .9) + "px"; - does nothing 
      parent.appendChild(img); //appendChild adds another child (img) object 
     }

我嘗試添加一些數學，但我不能揣摩出它應該去

來源

2013-10-07 brianforan

你們是不是要減少或增加在每次迭代圖像的高度？因爲現在圖像高度將保持在215px – samrap

@samrap我試圖減小圖像的高度 – brianforan

讓我知道如果這個小提琴完成你正在嘗試做的事：http://jsfiddle.net/AyNY5/。有幾件事情要記住：

您可以編輯圖像「高度」特性直接，沒有必要去通過樣式（你甚至都不需要添加PX！）
不要使用新的圖像（） - 使用document.createElement（'img'）。這是W3C支持的標準。

如果我關閉了，讓我知道 - 否則，你是在正確的軌道上！

JS代碼在小提琴：

var parent = document.getElementById("imgholder") 

for (i=0;i<3;i++) { 
    var img = document.createElement('img'); 
    img.src = "http://bit.ly/1975WKA" 
    img.height = "200" 
    parent.appendChild(img) 
}

來源

2013-10-07 00:59:09

這種方式可行，但我想我忘記了第一個之後的每個片段必須是前一個片段的90％。我想，如果我做了x = x * .9它會起作用，但是沒有出現。這是我試過的東西的一個jsfiddle，但它沒有工作，因爲它不是乘高度本身，而是圖像的數量： http://jsfiddle.net/jATk4/ – brianforan

我明白了。也許這更符合你所尋找的內容：http://jsfiddle.net/AyNY5/3/。我在For循環的範圍之外看到imgHeight變量，然後每次迭代應用.9。它不是很乾淨，但希望它有幫助！ –

yup !!感謝您的幫助，我想我只是過於複雜了，因爲我過去這樣做過，只是讓我的腳本遍佈整個地方而錯過了順序。 – brianforan

此時圖像沒有style.height分配。它確實有height屬性。

而不是

img.style.height = (img.style.height * .9) + "px";

嘗試

img.style.height = (img.height * .9) + "px";

來源

2013-10-07 00:55:24

Javascript：在for循環中編輯圖像高度

回答

相關問題