jQuery/CSS 创建样式选择的表单。这将改变页面的各个方面答案

【问题标题】：jQuery/CSS to create a Form for style choosing. That will change aspects of the pagejQuery/CSS 创建样式选择的表单。这将改变页面的各个方面
【发布时间】：2018-04-15 23:30:01
【问题描述】：

在课堂上，我想使用 CSS 的 jQuery 方法来创建一个表单，允许用户更改页面的各个方面。我在 CSS 部分苦苦挣扎。我为要提交的表单创建了一个函数，并显示了选择的结果。但无法弄清楚如何将 CSS 应用于表单以更改页面。任何想法或帮助都会很棒。谢谢

  <form id="style-form">

<div>
 <label for="fontColor">Font Color</label>
 <select name="font-color" id="fontColor">
  <option value="" disabled selected="selected">--Choose--</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
 </select>
</div>

<div>
 <label for="fontFamily">Font Family</label>
 <select name="font-family" id="fontFamily">
  <option value="" disabled selected="selected">--Choose--</option>
  <option value="times">Times New Roman</option>
  <option value="arial">Arial</option>
  <option value="monospace">Monospace</option>
 </select>
</div>

<div>
 <label for="fontSize">Font Size</label>
 <select name="font-size" id="fontSize">
  <option value="" disabled selected="selected">--Choose--</option>
  <option value="12">12</option>
  <option value="14">14</option>
  <option value="16">16</option>
 </select>
</div>

<div>
 <input type="submit" value="Submit Form" />
</div>

</form>

<div id="results">
</div>

$(function() {
 $('#style-form').on('submit', function(evnt) {
  evnt.preventDefault();
 $('#results').html('');
   let elements = this.elements;
   let index = 0;
  while (elements.item(index) !== null) {
   let el = elements.item(index);
   el = $(el);
   let name = el.attr('name');
   let value = el.val();
   console.log(name + ': ' + value);
  $('#results').append('<p><strong>' + name + '</strong>: ' + 
   value + '</p>');
  index++;
  }
  });
  });

【问题讨论】：

$('#results').css("background-color", "red");将结果框的背景颜色更改为红色。 css() 函数的第一个参数是 css 属性。第二个参数是期望值。您提到了“CSS的jQuery方法”，这应该表明jQuery中有一个css()函数，您可以在线搜索。
谢谢。我试图弄清楚或了解何时提交表单，所选选项可以更改页面。那就是我遇到问题的地方。所以如果有人要选择 (FontColor:Blue), (Font Family: Arial), (FontSize:16) 然后点击提交。我希望它影响/更改页面的样式

标签： javascript jquery css forms

【解决方案1】：

将字体颜色更改为仅颜色以更改文本颜色： <select name="color" id="fontColor">

您需要字体大小单位。在字体大小上添加“px”： <option value="12px">12</option>

将 css 应用于 Dom 元素。你可以使用身体。 $('body').css(name, value);

这将回答您的问题。我替换了while 循环和i 计数器以利用jQuery 的each() 循环。

$(function() {
  $('#style-form').on('submit', function(evnt) {
  evnt.preventDefault();
    $('#results').html('');
    $("#style-form option:selected").each(function(i){
      let $el = $(this);
      console.log($el.parent().attr('name') + " : " + $el.val());        
      $('#results').append('<p><strong>' + $el.parent().attr('name') + '</strong>: ' + 
      $el.val() + '</p>');  
      $('body').css($el.parent().attr('name'), $el.val());
    });
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="style-form">

<div>
 <label for="fontColor">Font Color</label>
 <select name="color" id="fontColor">
  <option value="" disabled selected="selected">--Choose--</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
 </select>
</div>

<div>
 <label for="fontFamily">Font Family</label>
 <select name="font-family" id="fontFamily">
  <option value="" disabled selected="selected">--Choose--</option>
  <option value="times">Times New Roman</option>
  <option value="arial">Arial</option>
  <option value="monospace">Monospace</option>
 </select>
</div>

<div>
 <label for="fontSize">Font Size</label>
 <select name="font-size" id="fontSize">
  <option value="" disabled selected="selected">--Choose--</option>
  <option value="12px">12</option>
  <option value="14px">14</option>
  <option value="16px">16</option>
 </select>
</div>

<div>
 <input type="submit" value="Submit Form" />
</div>

</form>

字体系列 - 选择 - 英语字体格式一种宋体等宽字体大小 - 选择 - 12 14 16

【讨论】：