javascript：即使在悬停时更改了DIV的宽度/高度，我如何能够立即获得DIV的宽度/高度

我试图通过Java脚本获得div的宽度和高度，在页面加载时获得了宽度和高度，但我将div悬停，所以它不会显示宽度/高度更新大小。我需要当div悬停时增加宽度或高度，同时移动/增加并显示div大小增加。我还需要当我用/height 50%到100%制作css动画时，以像素为单位显示宽度/高度动画

这是我需要的例子。当div宽度/高度增加时，也会增加顶部黑色区域中的值

$（文档）.ready（函数（）{
$（“#w-count”）.html（$（'.animating width'）.width（））；
$（“#h-count”）.html（$（'.animating width'）.height（））；
});
html{
背景：#292a2b；
颜色：#FFF；
}
.设置宽度动画{
填充：10px0；
文本对齐：居中；
背景：#e78629；
颜色：白色；
高度：100px；
宽度：50%；
-moz过渡：宽度2秒，缓进缓出；
-o型过渡：宽度为2s，易于进出；
-webkit过渡：宽度2秒，易于输入输出；
过渡：宽度2s，易于进出；
}
.设置宽度动画：悬停{
光标：指针；
宽度：100%；
}
人力资源{
边框颜色：#e78700；
边框底部：无；
}

在悬停宽度100%
x
上，可以使用
setInterval（）
创建间隔，并获取间隔中元素的宽度

setInterval(function(){
  $("#w-count").html(
    Math.round($('.animating-width').width())
  );
  $("#h-count").html(
     Math.round($('.animating-width').height())
  );
}, 10);


$（“#w-count”）.html（$（'.animating width'）.width（））；
$（“#h-count”）.html（$（'.animating width'）.height（））；
setInterval（函数（）{
$（“#w-count”）.html(
Math.round（$（'.animating width'）.width（）
);
$（“#h-count”）.html(
Math.round（$（'.animating width'）.height（）
);
}, 10);
html{
背景：#292a2b；
颜色：#FFF；
}
.设置宽度动画{
填充：10px0；
文本对齐：居中；
背景：#e78629；
颜色：白色；
高度：100px；
宽度：50%；
-moz过渡：宽度2秒，缓进缓出；
-o型过渡：宽度为2s，易于进出；
-webkit过渡：宽度2秒，易于输入输出；
过渡：宽度2s，易于进出；
}
.设置宽度动画：悬停{
光标：指针；
宽度：100%；
}
人力资源{
边框颜色：#e78700；
边框底部：无；
}

悬停宽度100%
x
使用setInterval将在悬停时以特定间隔呈现div的高度和宽度


$（文档）.ready（函数（）{
$（“#w-count”）.html（$（'.animating width'）.width（））；
$（“#h-count”）.html（$（'.animating width'）.height（））；
});
$（“.animating width”）.hover（函数（）{
setInterval（函数（）{
$（“#w-count”）.html（Math.trunc（$（'.animating width'）.width（））；
$（“#h-count”）.html（Math.trunc（$（'.animating width'）.height（））；
}, 100);
});
html{
背景：#292a2b；
颜色：#FFF；
}
.设置宽度动画{
填充：10px0；
文本对齐：居中；
背景：#e78629；
颜色：白色；
高度：100px；
宽度：50%；
-moz过渡：宽度2秒，缓进缓出；
-o型过渡：宽度为2s，易于进出；
-webkit过渡：宽度2秒，易于输入输出；
过渡：宽度2s，易于进出；
}
.设置宽度动画：悬停{
光标：指针；
宽度：100%；
}
人力资源{
边框颜色：#e78700；
边框底部：无；
}

在悬停宽度100%
x
上，也可以使用过渡结束事件


$（文档）.ready（函数（）{
DetectTransitionEnding='WebKittTransitionEnd OrtTransitionEnd OrtTransitionEnd msTransitionEnd transitionend msTransitionEnd transitionend'；
calcSize=函数（）{
$（“#w-count”）.html（$（'.animating width'）.width（））；
$（“#h-count”）.html（$（'.animating width'）.height（））；
}
calcSize（）；//第一次写入
myBox=$（“.animating width”）；
hover（函数（）{
myBox.addClass（'changeSize'）；
myBox.one（检测转换结束，calcSize）；
});
myBox.mouseout（函数（）{
myBox.removeClass（'changeSize'）；
myBox.one（检测转换结束，calcSize）；
});
});
html{
背景：#292a2b；
颜色：#FFF；
}
.设置宽度动画{
填充：10px0；
文本对齐：居中；
背景：#e78629；
颜色：白色；
高度：100px；
宽度：50%；
-moz过渡：宽度2秒，缓进缓出；
-o型过渡：宽度为2s，易于进出；
-webkit过渡：宽度2秒，易于输入输出；
过渡：宽度2s，易于进出；
光标：指针；
}
.设置动画-width.changeSize{
宽度：100%；
}
人力资源{
边框颜色：#e78700；
边框底部：无；
}

悬停宽度100%

x
就个人而言，我不会将它绑定到
.hover（）
或
.mouseover（）
方法。我会在外部构建它，并封装成更灵活的结构

const [d,resize,opt,ani] = [
    $('div'),
    ()=> d.html(Math.ceil(d.width())+'px'),
    {duration:1e3, step:()=> resize()},
    n=> ()=> d.stop().animate({width:n+'%'}, opt)
]
d.hover(ani(100),ani(50))


const[d，resize，opt，ani]=[
$（'div'），
（）=>d.html（Math.ceil（d.width（））+'px'），
{持续时间：1e3，步骤：（）=>resize（）}，
n=>（）=>d.stop（）.animate（{width:n+'%}，opt）
]
d、 悬停（ani（100），ani（50））
调整大小（）
div{
宽度：50%；
背景：橙色；
文本对齐：居中；
}

@hasan u可以试试这个。在这里你会得到一个完整的答案example@misorude我需要
id=“w-count”
和
id=“h-count”
中的值，然后您需要一个时间间隔或一些东西来持续检查当前值并更新输出。可能是现在brother的重复，这是一个例子，当悬停div时我需要这个，告诉我宽度/高度是多少，在这段代码中，还显示了点的值，如
109.365
，如果我只需要点之前的值，那么我们可以做什么？我还添加了顶部和底部填充，使原始高度为
120
，因此它显示
100
，您可以使用Math.trunc（）函数如果你想排除学习点上的分数部分，那么如果你能帮助我，那么我非常感谢你。我已经更新了代码以排除点值…请检查它是否工作如果我需要宽度和高度都增加，那么？@hassan你可以为元素高度的函数添加新参数它正在显示值我
const [d,resize,opt,ani] = [
    $('div'),
    ()=> d.html(Math.ceil(d.width())+'px'),
    {duration:1e3, step:()=> resize()},
    n=> ()=> d.stop().animate({width:n+'%'}, opt)
]
d.hover(ani(100),ani(50))