JavaScript追加跨度到文本

Question

我目前正在嘗試構建我的JavaScript函數，它爲元素中的每個字符提供CSS樣式。具體來說，這個函數接受一個元素，獲取其中的文本內容，將文本存儲到一個數組中，然後創建一系列跨度以追加到文本中。現在看起來好像我的代碼運行，當我在chrome開發工具中檢查變量時，它們返回正確的值。然而，當我真正實現這個代碼時，沒有任何可視變化，但在開發工具中，我得到了我的正確值<span style="style i chose" > text </span>。不知道我做錯了什麼在這裏

var array = []; 
var spanarray = []; 
var words = document.getElementsByClassName("example")[0]; 
function fadeInByLetter() { 
     for(var i = 0; i < words.innerHTML.length;i++){ 
      array.push(words.innerHTML[i]); 
      var span = document.createElement("span"); 
      var textNode = document.createTextNode(array[i]); 
      span.appendChild(textNode); 
      var spancomplete = span; 
      spanarray.push(spancomplete); 

     } 

     for(var i = 0; i < array.length;i++){ 
      spanarray[i].style.color = "red"; 
      spanarray[i].style.background = "pink"; 
     } 

    }  

fadeInByLetter(); 

Answer 1

var array = []; 
var spanarray = []; 
var words = document.getElementsByClassName("example")[0]; 
function fadeInByLetter() { 
    for(var i = 0; i < words.innerHTML.length;i++){ 
     array.push(words.innerHTML[i]); 
     var span = document.createElement("span"); 
     var textNode = document.createTextNode(array[i]); 
     span.appendChild(textNode); 
     var spancomplete = span; 
     spanarray.push(spancomplete); 

    } 
    words.innerHTML=""; 
    for(var i = 0; i < array.length;i++){ 
     spanarray[i].style.color = "red"; 
     spanarray[i].style.background = "pink"; 
     words.appendChild(spanarray[i]); 
    } 

}  

fadeInByLetter(); 

上述解決方案應該可以解決問題。但是，您有一些性能問題。您應該首先將字符串保存爲words.innerHTML。然後使用字符串而不是words.innerHTML。

Answer 2

這應該做的伎倆：

function fadeInByLetter (wordsContainer) { 
    // extract text from the container and transform into array 
    var chars = wordsContainer.innerHTML.split('') 
    //clear the container 
    while (wordsContainer.firstChild) { 
     wordsContainer.removeChild(wordsContainer.firstChild); 
    } 

    for(var i = 0; i < chars.length;i++){ 
     var span = document.createElement("span"); 
     var textNode = document.createTextNode(chars[i]); 
     span.appendChild(textNode); 
     span.style.color = "red"; 
     span.style.background = "pink"; 
     // append new element 
     wordsContainer.appendChild(span) 
    } 
}  

fadeInByLetter(document.getElementsByClassName("example")[0]); 

Answer 3

FYI：有，這是否同一類型的事情一個圖書館。 這叫做刻字https://github.com/davatron5000/Lettering.js

這是一個演示使用這個庫。

該庫依賴jQuery，但也有一個使用普通javascript的lib版本。見https://github.com/davatron5000/Lettering.js/wiki/More-Lettering.js

$(document).ready(function() { 
 
    $(".example").lettering(); 
 
}); 
 

 
//////////////// LETTERING SOURCE BELOW ///////////////////////////// 
 
//fadeInByLetter(); 
 
/*global jQuery */ 
 
/*! 
 
* Lettering.JS 0.7.0 
 
* 
 
* Copyright 2010, Dave Rupert http://daverupert.com 
 
* Released under the WTFPL license 
 
* http://sam.zoy.org/wtfpl/ 
 
* 
 
* Thanks to Paul Irish - http://paulirish.com - for the feedback. 
 
* 
 
* Date: Mon Sep 20 17:14:00 2010 -0600 
 
*/ 
 
(function($) { 
 
    function injector(t, splitter, klass, after) { 
 
    var text = t.text(), 
 
     a = text.split(splitter), 
 
     inject = ''; 
 
    if (a.length) { 
 
     $(a).each(function(i, item) { 
 
     inject += '<span class="' + klass + (i + 1) + '" aria-hidden="true">' + item + '</span>' + after; 
 
     }); 
 
     t.attr('aria-label', text) 
 
     .empty() 
 
     .append(inject) 
 

 
    } 
 
    } 
 

 

 
    var methods = { 
 
    init: function() { 
 

 
     return this.each(function() { 
 
     injector($(this), '', 'char', ''); 
 
     }); 
 

 
    }, 
 

 
    words: function() { 
 

 
     return this.each(function() { 
 
     injector($(this), ' ', 'word', ' '); 
 
     }); 
 

 
    }, 
 

 
    lines: function() { 
 

 
     return this.each(function() { 
 
     var r = "eefec303079ad17405c889e092e105b0"; 
 
     // Because it's hard to split a <br/> tag consistently across browsers, 
 
     // (*ahem* IE *ahem*), we replace all <br/> instances with an md5 hash 
 
     // (of the word "split"). If you're trying to use this plugin on that 
 
     // md5 hash string, it will fail because you're being ridiculous. 
 
     injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); 
 
     }); 
 

 
    } 
 
    }; 
 

 
    $.fn.lettering = function(method) { 
 
    // Method calling logic 
 
    if (method && methods[method]) { 
 
     return methods[method].apply(this, [].slice.call(arguments, 1)); 
 
    } else if (method === 'letters' || !method) { 
 
     return methods.init.apply(this, [].slice.call(arguments, 0)); // always pass an array 
 
    } 
 
    $.error('Method ' + method + ' does not exist on jQuery.lettering'); 
 
    return this; 
 
    }; 
 

 
})(jQuery);

span { 
 
    font-size: 74px; 
 
    font-family: Arial; 
 
    font-weight: 600; 
 
    text-transform: uppercase; 
 
    letter-spacing: 11px; 
 
    display: inline-block; 
 
} 
 

 
.char1 { 
 
    color: red; 
 
    transform: rotateZ(-10deg); 
 
} 
 

 
.char2 { 
 
    color: blue; 
 
    transform: rotateZ(-12deg); 
 
} 
 

 
.char3 { 
 
    color: purple; 
 
    transform: rotateZ(12deg); 
 
} 
 

 
.char4 { 
 
    color: pink; 
 
    transform: rotateZ(-22deg); 
 
} 
 

 
.char5 { 
 
    color: yellow; 
 
    transform: rotateZ(-12deg); 
 
} 
 

 
.char6 { 
 
    color: gray; 
 
    transform: rotateZ(22deg); 
 
} 
 

 
.char7 { 
 
    color: orange; 
 
    transform: rotateZ(10deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class="example">Example</span>