如何在 <div> 中动态更改所有段落文本颜色和大小？

Question

以下小提琴允许将文本粘贴到 <textarea> 并在按钮单击时生成段落。

是否可以在下面的代码中创建两个下拉列表<select></select>，一个将段落的颜色更改为<p> 为用户单击时选择的任何颜色，另一个更改大小动态文本？

附件是Fiddle。如果小提琴可以更新，那将非常有帮助，因为我还是编码新手。

HTML：

<div>
<div id="text_land" style="border:1px solid #ccc; padding:25px; margin-bottom:30px;">xzxz</div>
<textarea style="width:95%;"></textarea>
<button>Go</button>

Javascript：

$(function () {
  $('button').on('click', function () {
    var theText = $('textarea').val();
    var i = 200;
    while (theText.length > 200) {
        console.log('looping');
        while (theText.charAt(i) !== '.') {
            i++;   
        }

        console.log(i);
        $("#text_land").append("<p>" + theText.substring(0, i+1) + "</p>");
        theText = theText.substring(i+1);
        i = 200;
    }

    $('#text_land').append("<p>" + theText + "</p>");
  })

})

谢谢！

Answer 1

下面是Updated Fiddle。

代码

$(function () {
    $('button').on('click', function () {
        var theText = $('textarea').val();
        var i = 200;
        while (theText.length > 200) {
            console.log('looping');
            while (theText.charAt(i) !== '.') {
                i++;   
            }
            
            console.log(i);
            $("#text_land").append("<p>" + theText.substring(0, i+1) + "</p>");
            theText = theText.substring(i+1);
            i = 200;
        }
        
        $('#text_land').append("<p>" + theText + "</p>");
    })
    
    $("#color").on("change", function(){
    	$("#text_land").css("color", $(this).val())
    });
    
    $("#size").on("change", function(){
    	$("#text_land").css("font-size", $(this).val());
    });
    
    $("#bgcolor").on("change", function(){
    	$("#text_land").css("background", $(this).val())
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <div id="text_land" style="border:1px solid #ccc; padding:25px; margin-bottom:30px;">xzxz</div>
    <textarea style="widht:95%;"></textarea>
    <button>Go</button>
</div>

<select id="color">
    <option>Color</option>
    <option>Red</option>
    <option>Blue</option>
    <option>Black</option>
    <option>Green</option>
</select>

<select id="bgcolor">
    <option>Background Color</option>
    <option>Red</option>
    <option>Blue</option>
    <option>Black</option>
    <option>Green</option>
</select>


<select id="size">
    <option>Size</option>
    <option>16px</option>
    <option>18px</option>
    <option>20px</option>
    <option>22px</option>
</select>

Answer 2

虽然您已经接受了答案，但我想我会提供一个轻微的替代方案；对于如何进一步扩展以支持其他 css 属性，这更简洁一些，并且希望是显而易见的：

$(function() {
  
  // a slight change to your own approach,
  // binding an anonymous function as the
  // click event-handler of the <button>:
  $('button').on('click', function() {
    
    // getting the value of the <textarea>
    // element that follows the '#text_land'
    // element:
    var v = $('#text_land + textarea').val(),
        
        // splitting the value on double-
        // linebreaks to allow paragraphs to
        // be formed, and joining the array-
        // elements together with closing and
        // opening tags; then wrapping the
        // whole string in an opening and
        // closing tag:
      paragraphs = '<p>' + v.split(/\n\n/).join('</p><p>') + '</p>';
    
    // appending the paragraphs to the
    // '#text_land' element:
    $(paragraphs).appendTo('#text_land');
  });

  // binding an anonymous function as the
  // change event-handler for the <select>
  // elements:
  $('select').on('change', function() {
    
    // finding the elements that should
    // be affected:
    var targets = $('#text_land p'),
        
        // finding the CSS property to
        // update (held in the
        // 'data-property' attribute):
      property = this.dataset.property;

    // updating the CSS property of
    // those elements with the
    // property-value held in the 
    // <select> element's value property:
    targets.css(property, this.value);
    
    // because we're using disabled <option>
    // elements to act as the 'label' within
    // the <select> we set the selectedIndex
    // property to 0 (since those disabled
    // <label> elements are the first <option>
    // which shows the 'label' on page-load,
    // but the disabled attribute/property
    // prevents the user from re-selecting it):
  }).prop('selectedIndex', 0);
});

#text_land {
  border: 1px solid #ccc;
  padding: 25px;
  margin-bottom: 30px;
}
textarea {
  width: 95%;
}
label {
  display: block;
  width: 50%;
  clear: both;
  margin: 0 0 0.5em 0;
}
label select {
  width: 50%;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="styles">
    <!--
    wrapping the <select> elements in <label> elements, so that
    clicking the text will focus the <select>:
    -->
    <label>Color:
      <!--
      using a custom data-* attribute to store the css property
      that each <select> will affect/update:
      -->
      <select data-property="color">
        <!--
        Setting the first <option> to 'disabled' in order that
        the user cannot select the (pseudo) 'label' text:
        -->
        <option disabled>Select color:</option>
        <option>red</option>
        <option>green</option>
        <option>blue</option>
      </select>
    </label>
    <label>Font-size:
      <select data-property="font-size">
        <option disabled>Select font-size:</option>
        <option>smaller</option>
        <option>10px</option>
        <option>12px</option>
        <option>14px</option>
        <option>16px</option>
        <option>18px</option>
        <option>20px</option>
        <option>larger</option>
      </select>
    </label>
    <label>Background-color:
      <select data-property="background-color">
        <option disabled>Select background-color:</option>
        <option>aqua</option>
        <option>fuchsia</option>
        <option>limegreen</option>
        <option>silver</option>
      </select>
    </label>
  </div>
  <div id="text_land">xzxz</div>
  <textarea></textarea>
  <button>Go</button>
</div>

JS Fiddle demo.

这种方法的优点是一个事件处理程序可以充当所有<select> 元素的事件处理程序，只要在<option> 标记中给出适当的值，并且保持适当的CSS 属性在<select> 元素本身的data-property 属性中。这避免了为每个更新不同属性值的单独 <select> 元素编写事件处理程序的需要。

参考资料：

• JavaScript：
  • Array.prototype.join()。
  • Guide to JavaScript Regular Expressions。
  • Element.dataset。
  • String.prototype.split()。
• jQuery:
  • appendTo()。
  • css()。
  • on()。
  • prop()。
  • val()。

Answer 3

1. 创建 css 类，例如：.red、.blue 等

   .red { 红色; }

2. 在更改下拉值时，循环访问块中的 <p> 标签并将所需的类添加到 <p> 标签 (<p class="red">)。

通过创建所需字体大小的 css 类重复相同的操作来更改字体大小