Question

我正在研究jQuery相当于以下HTML DOM方法，以便找到文本框元素的大小：

<!DOCTYPE html>
<html>
<body>

Name: <input type="text" id="myText">

<p>Click the button to set the width of the text field.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  alert(document.getElementById("myText").size);
  document.getElementById("myText").size = "50";
  alert(document.getElementById("myText").size);
}
</script>

</body>
</html>

在HTML上方运行会显示两个警告框，分别为输出20和50。 20显示为默认文本框大小，大小重置为50后显示50.我需要通过jQuery读取此大小属性。我尝试使用可能的jQuery方式在上面的代码段中切换以下代码行，但它没有显示预期的输出：电流：

alert(document.getElementById("myText").size);

已更改为

alert($("myText").val().length);  //shows length of the value inside textbox.

alert($("myText").length); // shows 1 in the output and its expected because its jQuery's way of showing number of elements not its size.

alert($("myText").size()); // shows 1 in the output. This is equivalent to the length property. using size() is jQuery's preffered way as using length is deprecated.

我尝试了jquery docs，但无法找到我要找的东西。相关的stackoverflow问题讨论在文本框中查找值的长度，但我正在寻找文本框的大小。我的用例需要在UI屏幕上找出文本框的大小，以确定工具提示框和其他弹出窗口的位置。

Answer 1

使用$("#myText").prop("size")：

＆＃13;

function myFunction() {
  console.log($("#myText").prop("size"));
  $("#myText").prop("size", "50");
  console.log($("#myText").prop("size"));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Name: <input type="text" id="myText">
<p>Click the button to set the width of the text field.</p>
<button onclick="myFunction()">Try it</button>

＆＃13;

...并使用console.log进行调试，而不是alert; - ）

Answer 2

您可以使用旧的DOM。如果你想使用CSS3选择器，那就更好了

document.querySelector("#css3selector").size

它就像旧的DOM

一样

jQuery相当于document.getElementById（）。size

2 个答案: