为什么宽度样式值不显示在输入中？答案

【问题标题】：Why width style value not show in input?为什么宽度样式值不显示在输入中？
【发布时间】：2019-05-28 08:27:03
【问题描述】：

我正在尝试从“演示”div 中获取宽度并将其放入“输入数字”值中。我不知道我在哪里犯了错误......

function myFunction() {
    var element = document.getElementById("poster"),
    style = window.getComputedStyle(element),
    width = style.getPropertyValue('width');
  
  document.getElementById("demo").value = width;
}

 
<div id="poster" style="width:35px;height:45px;background-color:blue;"></div>

<input id="demo" type="number" placeholder="0" min="" max="" step="0.1">

<button onclick="myFunction()" type="button">Click Me!</button>

【问题讨论】：

标签： javascript input onclick styles return-value

【解决方案1】：

这个问题是因为width 的值是35px，所以你应该删除px，然后将它分配给document.getElementById("demo").value，以便在你的input 类型为number 时立即作为编号，如下代码所示

<div id="poster" style="width:35px;height:45px;background-color:blue;"></div>
<input id="demo" type="number" placeholder="0" min="" max="" step="0.1">
<button onclick="myFunction()" type="button">Click Me!</button>
<script>
    function myFunction() {
        var element = document.getElementById("poster"),
        style = window.getComputedStyle(element),
        width = style.getPropertyValue('width').match(/\d+/);

      document.getElementById("demo").value = width;
    }
</script>

如果你想得到没有单位的宽度数，例如。 35px 或 35% 将得到 35 您可以使用以下代码：

  <div id="poster" style="width:35px;height:45px;background-color:blue;"></div>
<input id="demo" type="number" placeholder="0" min="" max="" step="0.1">
<select id="unit" >
  <option >none</option>
  <option value="%">%</option>
  <option value="px">px</option>
</select>
<button onclick="myFunction()" type="button">Click Me!</button>
<script>
    function myFunction() {
        var element = document.getElementById("poster"),
        width = element.style["width"].match(/\d+/),
        unit = element.style["width"].match(/[^\d]+/);
        document.getElementById("unit").value = unit
        document.getElementById("demo").value = width;
    }
</script>

【讨论】：

在某些 div 元素中，我有 300 像素，而在某些 30% 中，如果我输入百分比，我总是以像素为单位返回。如何仅从宽度中获取数字 300 或 30 但不将其转换为像素？
Work grat :) 我现在需要宽度 = px 或 % 的文本，这样我就可以输入表格，并使用 if()...，如何？
艾哈迈德。我需要使用（“演示”）。值 = parseFloat（宽度）；获取输入数字中的数字。例如，width = "35px" 我只得到 35 没有 px 或 %。在我的代码中，除了输入数字之外，我还可以选择 px 或 %，因此我还应该从宽度 px 或 % 获取文本。没有数字，所以我输入了选择值。
我需要单独的变量，一个用于数字（35），一个用于宽度的字母（px 或 %）。 35 在输入数字中插入值，在选项选择中插入 px 或 % 值。

【解决方案2】：

您需要将width 转换为number，因为您使用的是input number 而不是文本。实际上，您的width 是一个字符串（35px）。

function myFunction() {
    var element = document.getElementById("poster"),
    style = window.getComputedStyle(element),
    width = style.getPropertyValue('width');

  document.getElementById("demo").value = parseFloat(width);
}

<div id="poster" style="width:35px;height:45px;background-color:blue;"></div>

<input id="demo" type="number" placeholder="0" min="" max="" step="0.1">

<button onclick="myFunction()" type="button">Click Me!</button>

【讨论】：

在某些 div 元素中，我有 300 像素，而在某些 30% 中，如果我输入百分比，我总是以像素为单位返回。如何仅从宽度中获取数字 300 或 30 但不将其转换为像素？
这可能对你有帮助...stackoverflow.com/questions/15807021/…
没有帮助，我可以得到百分比数字表单样式宽度不只是 px 吗？
不，getPropertyValue 总是返回 px，你必须将 px 转换为百分比
带 parseFloat(width);我只得到 nuber，我怎么能只得到文本 px 或 %，所以我可以使用 if()？