javascript - 获取图像高度属性并将其显示在CSS变换中

我用它来显示图像高度：

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

谢谢

最佳答案

您可以重写此函数：

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

关于javascript - 获取图像高度属性并将其显示在CSS变换中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25704428/