獲取圖像高度的屬性，並在CSS顯示它改造

Question

我用這個來顯示圖像高度：

<script> 
var img = new Image(); 
img.onload = function() { 
document.write(this.height); 
} 
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';</script> 

而這種改變變換CSS：

<script> 
function myFunction() 
{ 
document.getElementById("myDIV").style.transform = "translateY(-100px)"; 
/* Opera, Chrome, and Safari */ 
document.getElementById("myDIV").style.WebkitTransform = "translateY(-100px)"; 
/* IE 9 */ 
document.getElementById("myDIV").style.msTransform = "translateY(-100px)"; 
} 
</script> 

我想這些結合起來腳本做這樣的事情：

<script> 
var img = new Image(); 
function myFunction() 
{ 
document.getElementById("myDIV").style.transform = "translateY(-((this.height)-10)px)"; 
/* Opera, Chrome, and Safari */ 
document.getElementById("myDIV").style.WebkitTransform = "translateY(-((this.height)-10)px)px)"; 
/* IE 9 */ 
document.getElementById("myDIV").style.msTransform = "translateY(-((this.height)-10)px)"; 
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';} 
</script> 

我不知道JavaScript，所以我需要一些幫助。問題是：有沒有辦法將圖像高度顯示爲樣式轉換值。我需要（this.height）在零下10

感謝

Answer 1

你可以改寫這個功能：

<script> 
var img = new Image(); 
img.setAttribute('height', 10); 
function myFunction() { 
    var myDiv = document.getElementById("myDIV"); 
    myDiv.style.transform = "translateY(-" + (this.height - 10) + "px)"; 
    myDiv.style.WebkitTransform = "translateY(-" + (this.height - 10) + "px)"; 
    myDiv.style.msTransform = "translateY(-" + (this.height - 10) + "px)"; 
    img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif'; 
} 
</script> 

或者，因爲你的問題被打上了jQuery的標籤，你可以把它寫像這如果你使用jQuery：

<script> 
var img = new Image(); 
img.setAttribute('height', 10); 
function myFunction() { 
    // jQuery should take care of the vendor prefixing of translateY for you 
    $('#myDIV').css('transform', 'translateY(-' + (img.height - 10) + 'px)'); 
    img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif'; 
} 

$('button').click(myFunction); 
</script>