javascript：即使在悬停时更改，我如何立即获得 DIV 宽度/高度答案

【问题标题】：javascript: how can i get DIV width/height instantly even if changed on hoverjavascript：即使在悬停时更改，我如何立即获得 DIV 宽度/高度
【发布时间】：2018-11-19 12:22:44
【问题描述】：

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

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

$(document).ready(function() {
  $("#w-count").html($('.animating-width').width());
  $("#h-count").html($('.animating-width').height());
});

html {
  background: #292a2b;
  color: #FFF;
}

.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
  -moz-transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;
  -webkit-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;
}
.animating-width:hover {
  cursor: pointer;
  width: 100%;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

【问题讨论】：

@hasan 你可以试试这个。 api.jquery.com/height这里你会得到一个完整的例子
@misorude 我需要id="w-count" 和id="h-count" 中的值
那么您需要一个间隔或其他东西来不断检查当前值并更新您的输出。
stackoverflow.com/questions/35822889/…的可能重复
现在兄弟，看到这个Link 这是我在悬停div时需要这个的例子，所以告诉我什么是宽度/高度。

标签： javascript jquery css

【解决方案1】：

您可以使用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(function(){
  $("#w-count").html(
    Math.round($('.animating-width').width())
  );
  $("#h-count").html(
     Math.round($('.animating-width').height())
  );
}, 10);

html {
  background: #292a2b;
  color: #FFF;
}
.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
  -moz-transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;
  -webkit-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;
}
.animating-width:hover {
  cursor: pointer;
  width: 100%;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

您也可以使用.animate() 代替 CSS 过渡。

$("#w-count").html($('.animating-width').width());
// store first width of element
var width = $(".animating-width").width();
// mouseover & mouseout event
$(".animating-width").mouseover(function(){
  anim('100%');
}).mouseout(function(){
  anim(width);
});
// function of animation
function anim(width){
  $(".animating-width").stop().animate({
    width: width
  }, {
    duration: 1500,
    step: function(){
      $("#w-count").html($(this).width());
    }
  });
}

html {
  background: #292a2b;
  color: #FFF;
}
.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
}
.animating-width:hover {
  cursor: pointer;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

【讨论】：

如果我需要宽度和高度都增加那么？
@hassan 您可以为元素高度的函数添加新参数
它以点为单位显示值，无需在javascript中添加宽度或高度，只需将宽度或高度放在css中即可。
查看 ssamuel 的底部答案，该代码正在运行，但仅显示值。我需要在点之后删除值。
$(document).ready(function() {$("#w-count").html($('.animating-idth').width());$("#h-count").html($('.animating-width').height());});$(".animating-width").hover(function(){setInterval(function(){$("#w-count").html($('.animating-width').width());$("#h-count").html($('.animating-width').height());},50);}); 请问如何在此代码中添加Math.round()？

【解决方案2】：

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

$(document).ready(function() {
  $("#w-count").html($('.animating-width').width());
  $("#h-count").html($('.animating-width').height());
});

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

html {
  background: #292a2b;
  color: #FFF;
}

.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
  -moz-transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;
  -webkit-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;
}
.animating-width:hover {
  cursor: pointer;
  width: 100%;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

【讨论】：

兄弟，在这段代码中还显示了点中的值，如109.365，所以如果我只需要点之前的值，我们该怎么办？
我还添加了顶部和底部填充，所以原始高度是120，所以它显示100
如果要排除小数部分，可以使用 Math.trunc() 函数
我正处于学习阶段，所以如果你能帮助我做到这一点，我非常感谢，谢谢。
我已更新代码以排除点值...请检查它是否有效

【解决方案3】：

就个人而言，我不会将其绑定到 .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'),
	{duration:1e3, step:()=> resize()},
	n=> ()=> d.stop().animate({width:n+'%'}, opt)
]
d.hover(ani(100),ani(50))
resize()

div {
  width: 50%;
  background: orange;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

fiddle

【讨论】：

【解决方案4】：

你也可以使用过渡结束事件

    $(document).ready(function () {
        DetectTransitionEnding = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';


      calcSize = function() {
          $("#w-count").html($('.animating-width').width());
          $("#h-count").html($('.animating-width').height());
      }

      calcSize(); // first writting

      myBox = $(".animating-width");


      myBox.hover(function () { 
          myBox.addClass('changeSize');
          myBox.one(DetectTransitionEnding, calcSize);
      });

      myBox.mouseout(function () { 
          myBox.removeClass('changeSize');
          myBox.one(DetectTransitionEnding, calcSize);
      });

    });

    html {
      background: #292a2b;
      color: #FFF;
    }

    .animating-width {
      padding: 10px 0;
      text-align: center;
      background: #e78629;
      color: white;
      height: 100px;
      width: 50%;
      -moz-transition: width 2s ease-in-out;
      -o-transition: width 2s ease-in-out;
      -webkit-transition: width 2s ease-in-out;
      transition: width 2s ease-in-out;
      cursor: pointer;
    }

    .animating-width.changeSize {
      width: 100%;
    }

    hr {
      border-color: #e78700;
      border-bottom: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%
        <hr />
        <span id="w-count"></span>
        x
        <span id="h-count"></span>
    </div>

【讨论】：

【解决方案5】：

var targetElement = document.getElementById('target');
var height = 0;
var width = 0;
var updatePosition = function(){
   height = targetElement.offsetHeight;
   width = targetElement.offsetWidth;
};
updatePosition();
targetElement.addEventListener("mouseover", updatePosition);
window.addEventListener("resize", updatePosition);
window.addEventListener("scroll", updatePosition);

【讨论】：