Question

我正在为自己的目的更改动画代码，并且无法从div中获取文本来对其进行动画处理。

原始动画： https://codepen.io/Lunoware/pen/gjYjBw

我的代码（我删除了输入，脚本的不正确部分和“ if”指令）

<div class="container">
  <div class="row">
    <p id="text">Test</p>
  </div>
</div>

CSS

@background: #0bc020;


  #text{
    font-size: 2.5em;
    font-weight: bold;
    transition-duration: 1.5s;
    .char-outer-space{
      position: relative;
      display: inline-block;
      width: 20px;
      height: 20px;
    }
    .char-outer{
      position: relative;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin: 5px;
      .char-inner{
        position: absolute;
        animation-name: jumping;
        animation-duration: 0.5s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        left:0px;
        top:-15px;
      } 
    }
  }
}

@keyframes jumping {
    from {
      transform: translate(0, 8px);
    }
    to {
      transform: translate(0, -0px);
    }
}

jquery

jQuery(document).ready(function(){
      function splitHtmlString(text){

        var string = '#text';  

        var charArr = string.split("");
        var fixedString = "";
        charArr.forEach(function(char, index) {

          var offset = -index/10;

          if(char != " "){
            fixedString += "<span class='char-outer' style='animation-delay:" + offset + "s;'><span class='char-inner' style='animation-delay:" + offset + "s;'>" + char + "</span></span>";
          }else{
            fixedString += "<span class='char-outer-space'></span>";
          }
        });

        $("#text").html(fixedString);
      }
      splitHtmlString("");
    });

我需要从div中获取文本的行

Answer 1

您可以在W3schools

中找到更多参考

//get value as html
$('#text').html()
//get value as text  
$('#text').text()

Answer 2

document.getElementById('text').innerText,
document.getElementById('text').innerHTML

如何从div获取文本[html + jquery]

2 个答案: