在特定段落<p>元素上动态更改字体大小？

时间：2016-02-21 06:14:27

标签： javascript jquery html css

以下 JSFiddle 将文本拆分为具有设置文本限制的单个段落public IActionResult GetReviews(int productId) { var prodReviews = _repository.GetProductReviews(productId); return Json(prodReviews); } 框。

<小时/> 是否可以根据select选项通过contenteditable更改框中的文本大小，同时仍允许编辑，删除文本限制和保留动态大小属性？

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

<“>”等于相同的高度和宽度“

更改当字体动态更新时，需要在所有元素之间保持一致。


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


更新4：所有段落都需要与height属性auto一样生成。当前答案的问题在于，最后生成的段落边框也需要与前一个高度边框相同的高度与其他段落相同，包括更改字体大小时。

更新5 [图片]：上一个分段高度和边框不等于其他的问题示例。

Example of Problem with last divided paragraph height not equal to others.

链接到Fiddle

如果可以提供一个新的小提琴，我将非常感激，因为我还不熟悉编码。 谢谢！ 

<p>
$(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;
}

9 个答案:

答案 0 :(得分：9)

您可以转到 JSFiddle 

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

答案 1 :(得分：1)

试试这个

<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>

答案 2 :(得分：1)

我相信我有你的答案：

$(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/

答案 3 :(得分：1)

我不确定我是否理解了这个问题...您可以将字体大小设置为父元素（#content {font-size：whatever}）并继承它（#content p {font-size ：继承}）。如果您在父级中设置字体大小，则在添加时将应用于已添加的段落和新的段落。

（小提琴中的变化：选择更改中的选择器，“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>

答案 4 :(得分：1)

您可以将动态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/

答案 5 :(得分：0)

这应该有所帮助：

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

答案 6 :(得分：0)

更改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

答案 7 :(得分：0)

我创建了一个小提琴的分支，并编辑（添加）了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>');

答案 8 :(得分：0)

试试这个

$('#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>

相关问题
最新问题