querySelector 和字符串拆分。语法正确，无法弄清楚为什么这不正确

Question

我的问题很简单，我编写了一些代码，将

元素中的文本拆分到 div class 文本下。以该元素为目标的 javascript 不起作用，我对它进行了故障拍摄，发现它不会拆分，并且模板字符串中的运行也没有。我附上了下面的代码。

HTML:

<div class="circle">
        <div class ="logo"> </div>
        <div class="text">
            <p> test </p>
        </div>
    </div>
    <script>
        const text = document.querySelector('.text p');
        text.innerHTML = text.innerText.split("").map(
        (char, i) => 
        `<span style="transform:rotate(${i * 5}deg)">${char}</span>`
        ).join("")
    </script>

Answer 1

您需要使插入的 span 不是内联元素，否则将不会应用转换。 inline-block 有效。

const text = document.querySelector('.text p');
text.innerHTML = text.innerText.split("").map(
  (char, i) =>
  `<span style="display: inline-block; transform:rotate(${i * 5}deg)">${char}</span>`
).join("")

<div class="circle">
  <div class="logo"> </div>
  <div class="text">
    <p> test </p>
  </div>
</div>

querySelector 和字符串拆分。语法正确，无法弄清楚为什么这不正确

querySelector and string splitting. Syntax is correct, can't figure out why this isn't targeting right

javascript

html

web