Question

以下是我的代码

<!DOCTYPE html>
<html>
  <body>
    <svg width="12cm" height="12cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <line x1="20" y1="20" x2="20" y2="300" stroke="red"/>
    <line x1="20" y1="300" x2="300" y2="300" stroke="red"/>
    <rect id="bar1" x="40" y="280" width="30" height="20"/>
    <rect id="bar2" x="100" y="260" width="30" height="40"/>
    <rect id="bar3" x="160" y="180" width="30" height="120"/>
    <rect id="bar4" x="220" y="240" width="30" height="60"/>
    </svg>

    <br>
    <input id="input">
    <input id="button1" type="button" value="Set Value" onclick="setHeight()"/>
    <script>
       function setHeight(){
        var value1 = document.getElementById("input").getAttribute("value");
        var value2 = parseFloat(value1);
        document.write(value2);
        document.getElementById("bar2").setAttribute("height", value2);
       }
    </script>
  </body>
</html>

我正在尝试将“input”的值传递到“bar2”的“height”。但是脚本中出现了一些错误，“input”没有转换为int值。

由于

Answer 1

尝试获取input这样的值

var value1 = document.getElementById("input").value;

并将其设置为bar2，如此

document.getElementById("bar2").style.height = value2 + 'px';

通过JavaScript将值从输入传递到SVG属性

1 个答案: