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>

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

1 个答案: