时间戳

首页 > 解决方案 > 无法使用 jquery 获取动态创建按钮的高度

javascript - 无法使用 jquery 获取动态创建按钮的高度

问题描述

我有的：

我动态创建一个按钮并尝试访问按钮宽度。在这个例子中，我正在做console.log()，但在我的真实情况下，我想将该值用于其他事情。

let deleteButton = $(document.createElement("button"))
  .addClass("deleteButton")
  .text("delete")
  .click(function() {
    delete(this);
  });

console.log($(deleteButton).width());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

问题：

默认情况下，按钮有一个width和height，但console.log()显示为零。

如何获取按钮的默认宽度和高度？

观察：最有可能被接受的答案是使用.width()类似 jquery 的函数或解释为什么该函数不起作用并显示更好的解决方案。

标签： javascriptjquerybutton

解决方案

该函数获取匹配元素集中第一个元素$.width()的当前计算宽度。

基本上，该元素没有被引擎渲染/处理，因此width在它被添加到 DOM 树之前是不可用的。

let deleteButton = $(document.createElement("button"))
  .addClass("deleteButton")
  .text("delete")
  .click(function() {
    delete(this);
  });

// Here the engine will render/process this element.
$(document.body).append(deleteButton);

console.log($(deleteButton).width());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

推荐阅读