Question

我正在尝试构建我的javascript函数，它为元素中的每个字符提供css样式。具体来说，此函数接收一个元素，获取其中的文本内容，将文本存储到一个数组中，然后创建一串附加到文本的跨度。现在似乎我的代码运行，当我检查chrome dev工具中的变量时，它们返回正确的值。但是，当我实际实现此代码时，没有任何内容在视觉上发生变化，但在开发工具中，我得到了<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

仅供参考：有一个库可以执行相同类型的操作。它叫做刻字 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>

javascript追加跨文本

3 个答案: