javascript - 如何在 中动态更改所有段落文本的颜色和大小？

Question

下面的 fiddle 允许将文本粘贴到 <textarea> 中，并在单击按钮时生成段落。

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

附件是 Fiddle 。如果可以更新 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>