在特定段落<p>元素上動態更改字體大小？

Question

以下JSFiddle將文本拆分為具有設置文本限制的單個段落<p>框。

---

是否可以根據select選項通過contenteditable更改框中的文本大小，同時仍然允許編輯，刪除文本限制和保留動態大小屬性？

更新2：生成的框都需要：



並在字體動態更新時更改，需要在所有元素中保持一致。

更新3：最后生成的段落不等於邊框大小高度的其他段落。

更新4：所有段落都需要與height屬性auto一樣生成。 當前答案的問題在於，最后生成的段落邊界也需要與前一個高度邊界相同的高度與其他段落相同，包括更改字體大小時。

更新5 [圖像]：上一個分段高度和邊框不等於其他的問題示例。

鏈接到小提琴

如果可以提供一個新的小提琴，我將非常感激，因為我還是新編碼。 謝謝！

 $(function() { $('select').on('change', function() { var targets = $('p'), property = this.dataset.property; targets.css(property, this.value); }).prop('selectedIndex', 0); }); var btn = document.getElementById('go'), textarea = document.getElementById('textarea1'), content = document.getElementById('content'), chunkSize = 100; btn.addEventListener('click', initialDistribute); content.addEventListener('keyup', handleKey); content.addEventListener('paste', handlePaste); function initialDistribute() { var text = textarea.value; while (content.hasChildNodes()) { content.removeChild(content.lastChild); } rearrange(text); } function rearrange(text) { var chunks = splitText(text, false); chunks.forEach(function(str, idx) { para = document.createElement('P'); para.setAttribute('contenteditable', true); para.textContent = str; content.appendChild(para); }); } function handleKey(e) { var para = e.target, position, key, fragment, overflow, remainingText; key = e.which || e.keyCode || 0; if (para.tagName != 'P') { return; } if (key != 13 && key != 8) { redistributeAuto(para); return; } position = window.getSelection().getRangeAt(0).startOffset; if (key == 13) { fragment = para.lastChild; overflow = fragment.textContent; fragment.parentNode.removeChild(fragment); remainingText = overflow + removeSiblings(para, false); rearrange(remainingText); } if (key == 8 && para.previousElementSibling && position == 0) { fragment = para.previousElementSibling; remainingText = removeSiblings(fragment, true); rearrange(remainingText); } } function handlePaste(e) { if (e.target.tagName != 'P') { return; } overflow = e.target.textContent + removeSiblings(fragment, true); rearrange(remainingText); } function redistributeAuto(para) { var text = para.textContent, fullText; if (text.length > chunkSize) { fullText = removeSiblings(para, true); } rearrange(fullText); } function removeSiblings(elem, includeCurrent) { var text = '', next; if (includeCurrent && !elem.previousElementSibling) { parent = elem.parentNode; text = parent.textContent; while (parent.hasChildNodes()) { parent.removeChild(parent.lastChild); } } else { elem = includeCurrent ? elem.previousElementSibling : elem; while (next = elem.nextSibling) { text += next.textContent; elem.parentNode.removeChild(next); } } return text; } function splitText(text, useRegex) { var chunks = [], i, textSize, boundary = 0; if (useRegex) { var regex = new RegExp('.{1,' + chunkSize + '}\\\\b', 'g'); chunks = text.match(regex) || []; } else { for (i = 0, textSize = text.length; i < textSize; i = boundary) { boundary = i + chunkSize; if (boundary <= textSize && text.charAt(boundary) == ' ') { chunks.push(text.substring(i, boundary)); } else { while (boundary <= textSize && text.charAt(boundary) != ' ') { boundary++; } chunks.push(text.substring(i, boundary)); } } } return chunks; } 

 #text_land { border: 1px solid #ccc; padding: 25px; margin-bottom: 30px; } textarea { width: 95%; } label { display: block; width: 50%; clear: both; margin: 0 0 .5em; } label select { width: 50%; float: right; } * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: monospace; font-size: 1em; } h3 { margin: 1.2em 0; } div { margin: 1.2em; } textarea { width: 100%; } button { padding: .5em; } p { padding: 1.2em .5em; margin: 1.4em 0; border: 1px dashed #aaa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="styles"> <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> </div> <div> <h3>Paste text in the field below to divide text into paragraphs..</h3> <textarea id="textarea1" placeholder="Type text here, then press the button below." rows="5"> </textarea> <br> <br> <button id="go">Divide Text into Paragraphs</button> </div> <div> <h3 align="right">Divided Text Will Appear Below:</h3> <hr> <div id="content"></div> </div> 

Answer 1

在這里你去JSFiddle

$('#FontSize').change(function(){
var fontsize = $(this).val();
$('textarea').css('fontSize',fontsize);
});

Answer 2

試試這樣吧

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="styles"> <label>Font-size: <select data-property="font-size" onchange="$('#textarea1').css('font-size',this.value)"> <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> </div> <div> <h3>Paste text in the field below to divide text into paragraphs..</h3> <textarea id="textarea1" placeholder= "Type text here, then press the button below." rows="5"> Test text </textarea><br> <br> <button id="go">Divide Text into Paragraphs</button> </div> 

Answer 3

我相信我有你的答案：

$(function() {
  $('select').on('change', function() {
    var targets = $('p'),
      property = this.dataset.property;
    $("#content").css({'font-size': this.value});
  }).prop('selectedIndex', 0);
});

我更改了函數，以便將font-size設置為div而不是段落。 這是你想要的嗎？ 因為這是我從提供的信息中收集的。

https://jsfiddle.net/n9b6wju8/14/

Answer 4

我不確定我是否理解了這個問題...您可以將字體大小設置為父元素（#content {font-size：whatever}）並繼承它（#content p {font-size：inherit} ）。 如果在父項中設置字體大小，則在添加它們時將應用於已添加的段落和新的段落。

（小提琴中的變化：選擇更改中的選擇器，“p”和“#content p”的CSS選擇器/屬性）

（針對“相同高度”段落編輯的答案）為了獲得相同的高度，我添加了相同的高度（選擇器）功能。 我不確定你什么時候想觸發它，我把它放在選擇更改並重新排列（文本）。 （希望它有所幫助。使用outerHeight修復了函數中的高度）...再次編輯小提琴：同樣高度也會在窗口調整大小事件上被觸發。

function sameheight(selector){
var max_y=0;
var y=0;
$(selector).css('height','');
$(selector).each(function(){
  y=$(this).height();
  if(y>max_y) max_y=y;
});
$(selector).css('height',max_y);
}

 $(function() { $('select').on('change', function() { //Lets target the parent element, instead of P. P will inherit it's font size (css) var targets = $('#content'), property = this.dataset.property; targets.css(property, this.value); sameheight('#content p'); }).prop('selectedIndex', 0); }); $( window ).resize(function() { sameheight('#content p'); }); var btn = document.getElementById('go'), textarea = document.getElementById('textarea1'), content = document.getElementById('content'), chunkSize = 100; btn.addEventListener('click', initialDistribute); content.addEventListener('keyup', handleKey); content.addEventListener('paste', handlePaste); function initialDistribute() { var text = textarea.value; while (content.hasChildNodes()) { content.removeChild(content.lastChild); } rearrange(text); } function rearrange(text) { var chunks = splitText(text, false); chunks.forEach(function(str, idx) { para = document.createElement('P'); para.setAttribute('contenteditable', true); para.textContent = str; content.appendChild(para); }); sameheight('#content p'); } function handleKey(e) { var para = e.target, position, key, fragment, overflow, remainingText; key = e.which || e.keyCode || 0; if (para.tagName != 'P') { return; } if (key != 13 && key != 8) { redistributeAuto(para); return; } position = window.getSelection().getRangeAt(0).startOffset; if (key == 13) { fragment = para.lastChild; overflow = fragment.textContent; fragment.parentNode.removeChild(fragment); remainingText = overflow + removeSiblings(para, false); rearrange(remainingText); } if (key == 8 && para.previousElementSibling && position == 0) { fragment = para.previousElementSibling; remainingText = removeSiblings(fragment, true); rearrange(remainingText); } } function handlePaste(e) { if (e.target.tagName != 'P') { return; } overflow = e.target.textContent + removeSiblings(fragment, true); rearrange(remainingText); } function redistributeAuto(para) { var text = para.textContent, fullText; if (text.length > chunkSize) { fullText = removeSiblings(para, true); } rearrange(fullText); } function removeSiblings(elem, includeCurrent) { var text = '', next; if (includeCurrent && !elem.previousElementSibling) { parent = elem.parentNode; text = parent.textContent; while (parent.hasChildNodes()) { parent.removeChild(parent.lastChild); } } else { elem = includeCurrent ? elem.previousElementSibling : elem; while (next = elem.nextSibling) { text += next.textContent; elem.parentNode.removeChild(next); } } return text; } function splitText(text, useRegex) { var chunks = [], i, textSize, boundary = 0; if (useRegex) { var regex = new RegExp('.{1,' + chunkSize + '}\\\\b', 'g'); chunks = text.match(regex) || []; } else { for (i = 0, textSize = text.length; i < textSize; i = boundary) { boundary = i + chunkSize; if (boundary <= textSize && text.charAt(boundary) == ' ') { chunks.push(text.substring(i, boundary)); } else { while (boundary <= textSize && text.charAt(boundary) != ' ') { boundary++; } chunks.push(text.substring(i, boundary)); } } } return chunks; } function sameheight(selector){ var max_y=0; var y=0; $(selector).css('height',''); $(selector).each(function(){ y=$(this).outerHeight(); if(y>max_y) max_y=y; }); $(selector).css('height',max_y); } 

 #text_land { border: 1px solid #ccc; padding: 25px; margin-bottom: 30px; } textarea { width: 95%; } label { display: block; width: 50%; clear: both; margin: 0 0 .5em; } label select { width: 50%; float: right; } * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: monospace; font-size: 1em; } h3 { margin: 1.2em 0; } div { margin: 1.2em; } textarea { width: 100%; } button { padding: .5em; } p { /*Here the sliles for OTHER paragraphs*/ } #content p { font-size:inherit;/*So it gets the font size set on the #content div*/ padding: 1.2em .5em; margin: 1.4em 0; border: 1px dashed #aaa; overflow:hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="styles"> <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> </div> <div> <h3>Paste text in the field below to divide text into paragraphs..</h3> <textarea id="textarea1" placeholder="Type text here, then press the button below." rows="5"> </textarea> <br> <br> <button id="go">Divide Text into Paragraphs</button> </div> <div> <h3 align="right">Divided Text Will Appear Below:</h3> <hr> <div id="content"></div> </div> 

Answer 5

您可以將動態style元素注入DOM，並使用您所使用的字體大小進行更新。 您可以使用MV *框架來更新其內容。

$('#FontSize').change(function(){
    var fontsize = $(this).val();
    $('#style').remove(); //yes, there are better ways to update its content
    $('head').append('<style id="style">#content { font-size: '+fontsize + '}</style>');
});

擺弄： https ：//jsfiddle.net/ovfiddle/m75gre8o/1/

Answer 6

這應該有所幫助：

$('#FontSize').change(function(){ var fontsize = $(this).val(); $('textarea').css('fontSize',fontsize); });

Answer 7

要更改div和文本區域的字體大小：

  $(function() {
        $('select').change(function() {
            var fontsize = $(this).val();
            $('#textarea1').css('fontSize',fontsize);
            $('#content').css('fontSize',fontsize);
        }).prop('selectedIndex', 0);
  });

保持文本區域的高度：在CSS中

textarea {
    width: 95%;
    height: 200px;
}

使用px aslo而不是em

Answer 8

我創建了一個小提琴的分支，並編輯（添加）了select的事件處理程序。 我在其中添加了一些代碼，用於維護可編輯p元素的字體大小。 使用該引用，您可以根據您的要求應用所有樣式。

如果您的答案正確，請不要忘記將其標記為正確並進行投票。

JS Fiddle Fork

  targets.parent().find('style').remove();
  $('<style>[contenteditable="true"]
  {'+property+':'+this.value+'}\n[contenteditable="true"]:focus{'+property+':'+this.value+'}</style>').prependTo(targets.parent());
  {'+property+':'+this.value+'}[contenteditable="true"]:focus{'+property+':'+this.value+'}</style>');

Answer 9

試試這個

 $('#FontSize').change(function(){ var fontsize = $(this).val(); $('textarea, #content p').css('fontSize',fontsize); }); $('#go').click(function(){ var fontsize = $('#FontSize').val(); $('#content').css('fontSize',fontsize); }); $(function() { $('select').on('change', function() { var targets = $('p'), property = this.dataset.property; targets.css(property, this.value); }).prop('selectedIndex', 0); }); var btn = document.getElementById('go'), textarea = document.getElementById('textarea1'), content = document.getElementById('content'), chunkSize = 400; btn.addEventListener('click', initialDistribute); content.addEventListener('keyup', handleKey); content.addEventListener('paste', handlePaste); function initialDistribute() { var text = textarea.value; while (content.hasChildNodes()) { content.removeChild(content.lastChild); } rearrange(text); } function rearrange(text) { var chunks = splitText(text, false); chunks.forEach(function(str, idx) { para = document.createElement('P'); para.setAttribute('contenteditable', true); para.textContent = str; content.appendChild(para); }); } function handleKey(e) { var para = e.target, position, key, fragment, overflow, remainingText; key = e.which || e.keyCode || 0; if (para.tagName != 'P') { return; } if (key != 13 && key != 8) { redistributeAuto(para); return; } position = window.getSelection().getRangeAt(0).startOffset; if (key == 13) { fragment = para.lastChild; overflow = fragment.textContent; fragment.parentNode.removeChild(fragment); remainingText = overflow + removeSiblings(para, false); rearrange(remainingText); } if (key == 8 && para.previousElementSibling && position == 0) { fragment = para.previousElementSibling; remainingText = removeSiblings(fragment, true); rearrange(remainingText); } } function handlePaste(e) { if (e.target.tagName != 'P') { return; } overflow = e.target.textContent + removeSiblings(fragment, true); rearrange(remainingText); } function redistributeAuto(para) { var text = para.textContent, fullText; if (text.length > chunkSize) { fullText = removeSiblings(para, true); } rearrange(fullText); } function removeSiblings(elem, includeCurrent) { var text = '', next; if (includeCurrent && !elem.previousElementSibling) { parent = elem.parentNode; text = parent.textContent; while (parent.hasChildNodes()) { parent.removeChild(parent.lastChild); } } else { elem = includeCurrent ? elem.previousElementSibling : elem; while (next = elem.nextSibling) { text += next.textContent; elem.parentNode.removeChild(next); } } return text; } function splitText(text, useRegex) { var chunks = [], i, textSize, boundary = 0; if (useRegex) { var regex = new RegExp('.{1,' + chunkSize + '}\\\\b', 'g'); chunks = text.match(regex) || []; } else { for (i = 0, textSize = text.length; i < textSize; i = boundary) { boundary = i + chunkSize; if (boundary <= textSize && text.charAt(boundary) == ' ') { chunks.push(text.substring(i, boundary)); } else { while (boundary <= textSize && text.charAt(boundary) != ' ') { boundary++; } chunks.push(text.substring(i, boundary)); } } } return chunks; } 

 #text_land { border: 1px solid #ccc; padding: 25px; margin-bottom: 30px; } textarea { width: 95%; height: 100px; } label { display: block; width: 50%; clear: both; margin: 0 0 .5em; } label select { width: 50%; float: right; } * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: monospace; font-size: 1em; } h3 { margin: 1.2em 0; } div { margin: 1.2em; } textarea { width: 100%; } button { padding: .5em; } p { padding: 1.2em .5em; margin: 1.4em 0; width: 200px; height: 200px; border: 1px dashed #aaa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div id="styles"> <label>Font-size: <select id="FontSize" 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> </div> <div> <h3>Paste text in the field below to divide text into paragraphs..</h3> <textarea id="textarea1" placeholder= "Type text here, then press the button below." rows="5"> </textarea><br> <br> <button id="go">Divide Text into Paragraphs</button> </div> <div> <h3 align="right">Divided Text Will Appear Below:</h3> <hr> <div id="content"></div> </div>