меняет шрифт строки по одному символу за раз

Если я даю каждому персонажу свой собственный #id, я понимаю, как изменить шрифт одного персонажа за раз, однако я надеюсь сделать это для целых веб-страниц. есть ли более эффективный способ? или делает сотни #ids жизнеспособным вариантом?меняет шрифт строки по одному символу за раз

<body> 
    <div> 
     <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
    </div> 

    <script src="jquery.js" type="text/javascript" ></script> 

    <script> 
     var text = $("p").text(); 
     var newText = []; 
     for (var i = 0; i < text.length; i++) { 
      newText.push(text[i]); 
      // ???????? function goes here ???????? 
     } 
    </script> 
</body>

В конечном счете, что я думаю, что мне нужно сделать, это сделать каждую строку символов в HTML-объект? Это возможно ?

источник

2017-01-24 jen hill

Вы можете использовать 'text.split (" ")' для получения каждого символа в массиве. Не нужно писать цикл 'for'. – tanmay

HTML

<h1 id='name'>HULK IS GETTING ANGRY</h1>

$(document).ready(function(){ 
    var name = $('#name').text(); 
    var i = 0; 

    function changeColor() { 
    setTimeout(function() { 
     var firstPart = name.substr(0,i); 
     var secondPart = name.substr(i,name.length); 
     var newHtml = '<span style="color:green; font-family: \'Comic Sans MS\';">'+firstPart+'</span>'+secondPart; 

     if (i < name.length) { 
     changeColor(); 
     } 
     i++; 
    }, 500); 
    } 
    changeColor(); 
});

Check out this code-pen snippet

источник

2017-01-24 07:52:37

Конвертировать текст в массив, перебирать его и обернуть каждый символ в <span> -tag и применить к нему класс, который задает шрифт.

var text = $('p').text().split(''); 

text = text.map(function (char) { 

    // you probably don't want to wrap spaces 
    if (char === ' ') { 
     return char; 
    } 

    return '<span class="comicSans">'+char+'</span>'; 
}); 

// convert the array back into a string 
text = text.join(''); 

// replace the original string with the new 'fancy' string 
$('p').text(text);

style.css

.comicSans { 
    font-family: "Comic Sans"; 
}

источник

2017-01-24 06:34:24

меняет шрифт строки по одному символу за раз

ответ

Смежные вопросы