使用Javascript用户输入修改CSS

Using Javascript User Input to Modify CSS

本文关键字：修改 CSS 输入 用户 Javascript 使用      更新时间：2023-09-26

我想找到一种方法，让用户输入一个整数，然后用这个值来修改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的样式，但除此之外，我不确定。

谢谢你的帮助。

您的代码在某些方面存在格式错误。<form>不是自关闭的（它不应该以/>结束）。<div>不支持action属性（<form>支持）。

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

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

下面是小提琴演奏：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>

我使用了你的表单，并创建了它的新混合体lolhttp://jsfiddle.net/afSK8/193/

 function change() {
        men = document.getElementById("men").value;
        women = document.getElementById("women").value;
        document.getElementById('mod').style.width = men + "px";
        document.getElementById('mod').style.height = women + "px";
        }

您就快到了。

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

这里有几个想法：

  • 您可以添加一些CSS转换，使栏的动画效果良好
  • 给"p"元素一个id为"div"是没有意义的。试着更准确地命名它
  • 您可能需要在从表格中提取的数字上添加一个乘数。将每个人的条形图增加1px可能不够宽

希望这能有所帮助。

相关文章：