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

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

j查询

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