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

Get image height attribute and display it in a CSS transform

本文关键字：显示 CSS 转换 图像 高度 属性 获取      更新时间：2023-09-26

我用它来显示图像高度：

<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，所以我需要一些帮助。问题是：有没有一种方法可以将图像高度显示为样式转换值。我需要（这个高度）是负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>
相关文章：