javascript - 使用 Javascript 用户输入修改 CSS

Question

我想找到一种方法让用户输入一个整数，然后取该值来修改 div 的宽度。这可能吗？我找不到关于是否有办法这样做的任何资源。

        <div id="genderform" action=" "/>
        <form>
            What percentage of musicians do you think are men?<br>
            <input type="text" id="men"><br><br>
            What percentage of musicians do you think are women?<br>
            <input type="text" id="women"><br><br>
            <input type="submit" value="submit">
        </form>
    </div>
    <script>
        document.getElementById("genderform").onsubmit=function() {
        men = document.getElementById("men").value;
        women = document.getElementById("women").value;
        document.getElementById("text").innerHTML = "Results: <br>" + "Men: " + men + "%<br>Women: " + women + "%";
        return false;
        }
    </script>
    <p id="text">Results:</p>
    <div id="test" style="background-color: #ff0000; height:50px; width: 1px;">

这就是我目前所拥有的。我知道有人会使用 .style 来修改所选 div 的样式，但除此之外我不确定。

感谢您的帮助。

Answer 1

您的代码在几个方面存在缺陷。 <form>不是自动关闭的(它不应该以 /> 结尾)。 <div>不支持 action属性(<form> 有)。

您可以通过设置 .style.width 来调整 CSS 宽度属性:

document.getElementById("div").style.width = women + "%";

这是一个正在运行的 fiddle :http://jsfiddle.net/L9xuj7mj/

这里是完整的代码，你的错误已经清理干净了:

    <form id="genderform" action="" >
        What percentage of musicians do you think are men?<br />
        <input type="text" id="men" /><br /><br />
        What percentage of musicians do you think are women?<br />
        <input type="text" id="women" /><br /><br />
        <input type="submit" value="submit" />
    </form>
<p id="text">Results:</p>
<p id="div" style="background-color: #ff0000; height:50px; width: 1px;"></p>

<script type="text/javascript">
    document.getElementById("genderform").onsubmit=function() {
    men = document.getElementById("men").value;
    women = document.getElementById("women").value;
    document.getElementById("text").innerHTML = "Results: <br>" + "Men: " + men + "%<br>Women: " + women + "%";
            document.getElementById("div").style.width = women + "%";
    return false;
    }
</script>