Question

我有一个带标题标签的div。

<div class="hero__title">
   <h1 class="hero__title-txt">Page title</h1>
</div>

我正在尝试获得所需的输出

<div class="hero__title">
   <h1 class="hero__title-txt">
       <span>P</span>
       <span>a</span>
       <span>g</span>
       <span>e</span>
       <span>T</span>
       <span>i</span>
       <span>t</span>
       <span>l</span>
       <span>e</span>
   </h1>
</div>

这是为了使用一些CSS在动画中设置酷炫的样式。我会担心Javascript再次将单词分开。

span{
     transition: 1s left ease;
}
span:nth-child(1){
     transition-delay: 400ms;
}
span:nth-child(2){
     transition-delay: 600ms;
}
span.word{
     display:inline-block;
     margin-right:10px;
}

This不错的SO文章是不错的指南，但正如其中一个答复所指出的那样，它仅在发出最后一个跨度时才有效。是的，有很多jQuery选项，但是在我的第一个没有jQuery的项目中，我很想使用本机脚本来完成此操作。

<div id="text">Hello, <span class="name">John</span></div>

var text = document.getElementById("text");
var msg = text.textContent;
var name = document.getElementsByClassName("name")[0].textContent;

// remove name from msg
msg = msg.substring(0,msg.length - name.length);
// to char array
msg = msg.split('');
name = name.split('');

text.innerHTML = "<span>" + msg.join("</span><span>") + "</span>";
text.innerHTML += "<span class=\"name\">" + name.join("</span><span class=\"name\">") + "</span>";

Answer 1

这比您正在做的事情简单得多。查看内嵌评论。

let h1 = document.querySelector(".hero__title-txt"); // Get reference to the h1
let text = h1.textContent.split("");                 // Get the text content into an array

let result = ""; // Will hold output

// Loop over the array
text.forEach(function(char){
  // Append a new span only if the current char is not a space
  result += (char.trim() === "") ? "" : "<span>" + char + "</span>";
});

h1.innerHTML = result;  // Reset the h1's content

console.log(h1.outerHTML); // Test

<div class="hero__title">
   <h1 class="hero__title-txt">Page title</h1>
</div>

将div中的每个字母分成自己的跨度

1 个答案: