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>不是自我关闭的（它不应该以{{1}}结尾）。 />不支持<div>属性（action确实如此）。

您可以通过设置<form>：

来调整CSS宽度属性

.style.width

这是一个小提琴：http://jsfiddle.net/L9xuj7mj/

以下是整个代码，清除了您的错误：

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

Answer 2

我使用了你的表单并创建了一个新的混合lol http://jsfiddle.net/afSK8/193/

DateTime _dateOnly = DateTime.Now;
DateTime _timeOnly = DateTime.Now;

public DateTime Combined { get; set; }

      public DateTime DateOnly
        {
            get { return _dateOnly.Date; }
            set
            {
                _dateOnly = value.Date;
                Combined = DateOnly.Add(TimeOnly.TimeOfDay);
            }
        }

        public DateTime TimeOnly
        {
            get { return _timeOnly.ToLocalTime(); }
            set
            {
                _timeOnly = value.ToLocalTime();
                Combined = DateOnly.Add(TimeOnly.TimeOfDay);
            }
        }

Answer 3

你几乎就在那里。

var numMen = document.getElementById('men').value;
document.getElementById('div').style.width = numMen + 'px';

这里有几个想法：

你可以添加一些CSS过渡来使条形图很好地生成动画。
给出＆＃34; p＆＃34;元素一个id＆＃34; div＆＃34;没有意义。试着更准确地命名。
您可能希望为从表单中提取的数字添加乘数。每个人增加1px的标准可能不够宽。

希望这有帮助。

使用Javascript用户输入修改CSS

3 个答案: