Question

我的HTML中有一个小方框，还有3个单选按钮，用于添加定位属性，固定，绝对和相对。我还有2个文本输入选项，用于从顶部移动框输入的像素数量，另一个输入用于将div从左边移动一些奇数像素。这是我的HTML：

  <div id="input">
    <form action="index.html" method="post">
      <input type="radio" name="position" value="fixed"> Fixed<br>
      <input type="radio" name="position" value="absolute"> Absolute<br>
      <input type="radio" name="position" value="relative"> Relative <br>
      <br>Top:<br>
      <input type="text" name="top"> px
      <br>
      <br>Left:<br>
      <input type="text" name="left"> px
      <br><br>
      <input type="button" class="button" value="submit" onClick="computeForm(this.form)">
    </form>
  </div><!--closes input-->
</div><!--closes text-area-->

  <div id="image">
    <div id="box">
    </div><!--closes box-->
</div><!--closes image-->

我在Javascript和jQuery方面真的很陌生，而且我越是没有指导就越多，我似乎越来越混淆自己......

Answer 1

您必须先在表单中获取数据，然后在元素上设置样式。这是一个例子：

function computeForm(form){
  // Get form data
  var data = new FormData(form);

  // Assign data to variables
  var position = data.get("position");
  var left = data.get("left");
  var top = data.get("top");

  // Get box element
  var box = document.getElementById("box");

  // Set style
  box.style.position = position;
  box.style.left = left + "px";
  box.style.top = top + "px";
}

https://jsfiddle.net/ju79h33y/

Answer 2

要设置文本输入的样式，您可以将样式属性添加到元素：

<input style="border: 1px solid blue" type="text" name="left">

此处在您的代码中实现：http://codepen.io/BradLee/pen/QvpJyv?editors=1010

单选按钮受限于可以和不可以设置样式的内容。一种常见的方法是隐藏输入并将其替换为自定义对象。这是一个教程： https://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

如何将css属性添加到广播和输入表单

2 个答案: