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

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

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

<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