JavaScript - 在 css 转换期间获取元素的宽度

Question

我想在 javascript 中显示元素的宽度。这部分已经在工作，但这是我的问题： 当元素的宽度动画时，在动画过程中我想看到真实元素的宽度，而不是最终元素的宽度。

我正在使用 Angular，我想做的可以通过使用函数 $(el).width() 包含 JQuery，但我想删除 JQuery 的使用。

我已经尝试过了（假设 el 是一个 HTML 元素）：

el.offsetWidth
el.clientWidth
el.scrollWidth
el.getBoundingClientRect().width

Answer 1

前段时间我遇到了同样的问题，图像尚未加载且大小为 0。我通过使用以下代码获取原始图像大小解决了这个问题。确保您在 onload 函数中继续您的代码

var image = new Image();
image.onload = function() {

    // set its dimension to target size
    var width = image.width;
    var height = image.height;
};
image.src = el.img;

如果需要，也可以使用 base64 字符串进行此操作

var image = new Image();
image.onload = function() {

    // set its dimension to target size
    var width = image.width;
    var height = image.height;
};
image.src = "data:image/jpg;base64," + img;