以下小提琴允许将文本粘贴到<textarea>并在单击按钮时生成段落。
<textarea>
是否可以在下面的代码中创建两个下拉列表<select></select>，改变段落颜色的一个<p>用户单击时选择的任何颜色以及动态更改文本大小的其他颜色？
<select></select>
<p>
附件是Fiddle https://jsfiddle.net/zdCyq/15/。如果小提琴可以更新，那将非常有帮助，因为我对编码还是新手。
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>"); }) })
谢谢你！
以下是更新了小提琴 https://jsfiddle.net/RajeshDixit/zdCyq/60/.
$(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>
