為什么沒有應用內聯變換 styles

Question

所以我想做的是 map 字符串的每個字符到一個跨度。 對於每個跨度，我使用內聯 styles 以便根據字符串中的當前 position 動態更改字符的 y position。 然后我將這個 span 字符串添加到一個變量中，該變量最終將包含所有轉換為 span 的字符，然后使用 innerHTML 將 output 放入 DOM。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="output"></p>
  </body>
  <script>
    const text = "the dog jumped over the fence";

    let output = "";

    let i = 0;
    for (char of text) {
      output += `<span style="transform: translateY(${i}px)">${char}</span>`;
      i += 1;
    }

    document.querySelector("#output").innerHTML = output;
  </script>
  <style>
    body {
      background-color: black;
    }
    span {
      color: green;
    }
  </style>
</html>

但是，我的與變換有關的 styles 都沒有在外部應用。 我檢查了開發人員控制台，跨度確實有我想要的 styles，但它們並沒有應用於實際頁面。 [1] https://i.stack.imgur.com/MoDnq.png

奇怪的是，這似乎只發生在變換 CSS 屬性中。 當我使用當前的 position 編輯每個跨度的字體大小時，我得到了預期的 output。

/* When I change the for loop to adjust the font size instead of using transform */
for (char of text) {
      output += `<span style="font-size: ${i}px">${char}</span>`;
      i += 1;
    }

這就是我得到的：[1]： https://i.stack.imgur.com/0dk21.png

Answer 1

當您嘗試垂直平移span元素時，由於內聯元素在 HTML 中的工作方式，您看不到任何變化。

如果要對span應用平移，首先需要將它們的顯示樣式更改為inline-block ，這樣您就可以對它們應用變換，同時保持它們在同一行。

#output span { display: inline-block; }

來自w3 css wiki ：

可變形元素

可變形元素是屬於以下類別之一的元素：

其布局由 CSS 框 model 管理的所有元素，除了不可替換的內聯框、表列框和表列組框 [CSS2]

所有 SVG 繪制服務器元素、clipPath 元素和 SVG 可渲染元素，文本內容元素的任何后代元素除外 [SVG2]

Answer 2

CSS 變換僅適用於塊元素。 將您的span更改為塊元素。

span {
      display: inline-block;
      color: green;
    }

為什么沒有應用內聯變換 styles

問題描述

2 個解決方案

解決方案1
0 已采納 2021-12-31 00:30:50

解決方案2
0 2021-12-31 00:54:06

為什么沒有應用內聯變換 styles

問題描述

2 個解決方案

解決方案1 0 已采納 2021-12-31 00:30:50

解決方案2 0 2021-12-31 00:54:06

解決方案1
0 已采納 2021-12-31 00:30:50

解決方案2
0 2021-12-31 00:54:06