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

Question

我正在尝试从"demo"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>
 

Answer 1

这个问题是因为width值是35px所以你应该在document.getElementById("demo").value input类型被number后立即将其分配给数字之前删除px，如以下代码

<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>

Answer 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>