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

【问题标题】：how to add css attributes to a radio and input form如何将 css 属性添加到单选和输入表单
【发布时间】：2017-09-27 04:03:55
【问题描述】：

我的 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 的新手，我越是在没有指导的情况下走，我似乎越是迷惑自己......

【问题讨论】：

您打算使用这些属性进行哪些修改？
你应该看看这个 W3School 教程w3schools.com/jquery/jquery_ref_html.asp。我相信你可以自己做你想做的。

标签： javascript jquery forms input radio

【解决方案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/

【讨论】：

没问题，别忘了设置为已回答

【解决方案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

【讨论】：