javascript - 使用 jQuery 自定义字母大小

Question

我有一个最大长度为 4 个字符的文本字段。我还有一个图层，可以让我在图像中显示我在文本字段中输入的内容。然而;我需要自定义输入字母的大小。如果有人输入 4 个字母，第一个字母应该大而下一个字母应该小。我有 4 个不同的元素，我想包括这个。我正在考虑使用 switch 语句。

   myProjectpage.view.applySomeTextLineText = function() {
        myProjectpage.model.logTime( "applySomeTextLineText", "start" );
        var layout = myProjectpage.model.currentChoices.Layout;
        for ( var i = 0; i < layout.layers.length; i++ ) {
            layer = layout.layers[i];
            if ( layer.property ==  myProjectpage.TEXT_LINE_1 ) {
                var layerHTML = "";
                if (  myProjectpage.model.labelType == "myaddedtext" && $("#dropdownchoice1").val() == "only1textfield" ) {
                    switch( myProjectpage.model.currentChoices.TextLine1Text.length ) {
                    case 1:
                        //letters with diferent sizes.
                        break;
                    case 2:

                        break;
                    case 3:

                        layerHTML = "a" + "span style='font-size: 1.1em;>b</span>" + "c";

                        break; 
                     case 4: 
break;
                    }
                } else {
                    layerHTML = myProjectpage.model.currentChoices.TextLine1Text;

                } 

Answer 1

假设 layer 是一个 HTML 元素，并且您想将样式直接应用到该元素，您应该能够使用 jQuery 的 css() 修改文本大小。函数和一个 switch 或一组 if 语句。如果 layer 不是 HTML 元素，您需要将 $(layer) 替换为适当的选择器。

当然，您始终可以为四种文本大小设置样式，并在您的 switch 或 if 语句中切换它们。

这是一个概念示例的快速证明:

$(function() {
  var layer = $('#sized_text_output');

  $('#sized_text_input').on('input', function() {
    var sized_text = $(this).val();
    $('#sized_text_output').text(sized_text);

    switch (sized_text.length) {
      case 1:
        $(layer).css({ 'font-size': '4.5em' });
        break;
      case 2:
        $(layer).css({ 'font-size': '3em' });
        break;
      case 3:
        $(layer).css({ 'font-size': '1.5em' });
        break;
      case 4:
        $(layer).css({ 'font-size': '1em' });
        break;
    }

    // if (sized_text.length === 1) {
    //   $(layer).css({'font-size': '4.5em'});
    // } else if (sized_text.length === 2) {
    //  $(layer).css({'font-size': '3em'});
    // } else if (sized_text.length === 3) {
    //  $(layer).css({'font-size': '1.5em'});
    // } else if (sized_text.length === 4) {
    //  $(layer).css({'font-size': '1em'});
    // }

  })
});   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sized_text_input" maxlength="4">
<div id="sized_text_output"></div>