对 iQuery 方法 .css() 使用多个值会引发错误："缺少 )"。然而它并没有丢失

Question

错误说我缺少括号。但是语法与w3Schools和Mozilla相同。如果 im 只设置一种样式，则 .css(( 有效，但在设置超过 1 种样式时中断。

jQuery

 <script>
      $(document).ready( function(){
          // event-handler to create new element
          function createContainer() {
              // variables store values from <select> element
              var elementType = $('select').val();
              // string containing markup for use with .append()
              var elementTypeStr = $(` <${elementType}> This is a ${elementType} </${elementType}> `);
              // this throws error, while setting single style doesn't
              $('#layout_demo').append( elementTypeStr );
              elementTypeStr.css("background-color":" blue" , "height": "100px");
          } // end createContainer()
          // ---------------------------- event handlers ---------------------
          $('#btn').click( createContainer );
          // button to delete latest element or selected element
      }); // end ready
  </script>

.HTML：

<section id="form">
  <!-- select element --->
  <label for="container"> Please select type of container to add</label>
  <select id= "container">
    <option value= "div" > &ltdiv&gt </option>
    <option value= "p"> &ltp&gt </option>
    <option value= "section"> &ltsection&gt </option>
  </select>
  <!-- Seperate container to hold now elements -->
  <button id="btn" > Create Container </button>
</section>
<div id="layout_demo">

</div>

Answer 1

使用 .css() 时，有两个选项来传递参数：逗号分隔的字符串或对象文字表示法

因此：

.css("background-color", " blue").css("height", "100px");

或者更确切地说：

.css({backgroundColor:"blue" , height:"100px"});

此外，与其使用$('select').val();不如使用更严格的选择器，例如某些 ID; 'select'可以是页面中的任何选择。

jQuery($ => {
  const createElement = () => {
    const tagName = $('#element').val();
    
    return $(`<${tagName}/>`, {
      appendTo: '#layout',
      text: `This is a ${tagName}`,
      css: {
        backgroundColor: "blue",
        height: "100px"
      },
    });
  }
  $('#create').on('click', createElement);
});

<section id="form">
  <label>
    Please select type of container to add
    <select id="element">
      <option value="div">&ltdiv&gt</option>
      <option value="p">&ltp&gt</option>
      <option value="section">&ltsection&gt</option>
    </select>
  </label>
  <button id="create">Create Container</button>
</section>
<div id="layout"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

多个.css()属性需要位于一个对象中。

$(document).ready(function() {
  // event-handler to create new element
  function createContainer() {
    // variables store values from <select> element
    var elementType = $('select').val();
    // string containing markup for use with .append()
    var elementTypeStr = $(` <${elementType}> This is a ${elementType} </${elementType}> `);
    // this throws error, while setting single style doesn't
    $('#layout_demo').append(elementTypeStr);
    elementTypeStr.css({
      "background-color": " blue",
      "height": "100px"
    });
  } // end createContainer()
  // ---------------------------- event handlers ---------------------
  $('#btn').click(createContainer);
  // button to delete latest element or selected element
}); // end ready

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="form">
  <!-- select element --->
  <label for="container"> Please select type of container to add</label>
  <select id="container">
    <option value="div"> &ltdiv&gt </option>
    <option value="p"> &ltp&gt </option>
    <option value="section"> &ltsection&gt </option>
  </select>
  <!-- Seperate container to hold now elements -->
  <button id="btn"> Create Container </button>
</section>
<div id="layout_demo">
</div>