使用jQuery自定义字母大小

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

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; 

       }

来源

2016-02-04 Vlad uddin

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

来源

2016-02-04 19:29:51 twernt

的代码是罚款我做了一个叫usersText变量，使它有点短，不写“myProjectpage.model。 currentChoices.TextLine1Text;“。要记住“”的确切位置有点难。看看你的“”和我为案例1和2做的那些，你会看到不同之处。所述的charAt（）方法将抓住字符在字符串中或在文本中的用户类型

enter code here 

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") { 
        var usersText =

myProjectpage.model.currentChoices.TextLine1Text。开关（myProjectpage.model.currentChoices.TextLine1Text.length）{ 壳体1：

layerHTML = "<span style='font-size:2.9em;'>" + usersText.charAt(0) + "</span>"; 


       //letters with diferent sizes. 
         break; 
        case 2: 
layerHTML = "<span style='font-size:2.5em;'>" + usersText.charAt(0) + "</span>" + "<span style='font-size:2.5em;'>" + usersText.charAt(1) + "</span>"; 
         break; 
        case 3: 

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

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

       }

来源

2016-02-10 14:41:08 Gestef

使用jQuery自定义字母大小

回答

相关问题