如何動態更改所有段落文本的顏色和大小 <div> ？

Question

是否可以在下面的代碼中創建兩個下拉列表<select></select> ，一個將列表<p>的顏色更改為用戶單擊時選擇的任何顏色，另一個將其大小更改為文字動態嗎？

附件是小提琴 。 如果可以更新小提琴，那將是非常有幫助的，因為我還是編碼的新手。

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

以下是更新的小提琴 。

碼

 $(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小提琴演示 。

這種方法的優點是，只要<option>標記中提供了適當的值，並且data-property保留了適當的CSS屬性，則一個事件處理程序就可以充當所有<select>元素的事件處理程序。 <select>元素本身的data-property屬性。 這樣避免了為每個更新不同屬性值的<select>元素寫出事件處理程序的需要。

參考文獻：

• JavaScript：
  • Array.prototype.join() 。
  • JavaScript正則表達式指南 。
  • Element.dataset
  • String.prototype.split() 。
• jQuery的：
  • appendTo() 。
  • css() 。
  • on() 。
  • prop() 。
  • val() 。

Answer 3

1. 創建CSS類，例如：.red，.blue等

   .red {顏色：紅色； }

2. 更改下拉值時，循環瀏覽塊中的<p>標記，然后將所需的類添加到<p>標記（ <p class="red"> ）中。

通過創建所需字體大小的c​​ss類，重復上述操作來更改字體大小