JavaScript追加跨度到文本

我目前正在尝试构建我的JavaScript函数，它为元素中的每个字符提供CSS样式。具体来说，这个函数接受一个元素，获取其中的文本内容，将文本存储到一个数组中，然后创建一系列跨度以追加到文本中。现在看起来好像我的代码运行，当我在chrome开发工具中检查变量时，它们返回正确的值。然而，当我真正实现这个代码时，没有任何可视变化，但在开发工具中，我得到了我的正确值<span style="style i chose" > text </span>。不知道我做错了什么在这里JavaScript追加跨度到文本

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();

来源

2017-08-10 John A

你不是用新的内容替换的innerHTML;） – lukaleli

你在哪里把span元素到DOM？ –

你想把字母放在哪里？尝试附加或设置DOM中的跨度内容。 – PabloWeb18

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。

来源

2017-08-10 19:53:16

这应该做的伎俩：

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]);

来源

2017-08-10 19:56:52 lukaleli

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>

来源

2017-08-10 20:56:22 flyer

JavaScript追加跨度到文本

回答

相关问题